.tiny-slider-container.testimonials-container .testimonials-slider %h2.text-center What everyone's saying... .testimonials-wrapper - data.testimonials.each_slice(3).to_a.each do |group| .testimonials-row - group.each do |testimonial| .testimonial = image_tag "#{testimonial.logo}", class: "testimonial-logo", alt: "#{testimonial.name} logo svg" - if testimonial.stars = image_tag "#{testimonial.stars}", class: "review-stars", alt: "Gitlab stars svg" %p.testimonial-quote = testimonial.quote %p.testimonial-author = testimonial.author - if testimonial.type === "case-study" %a.testimonials-link{ href: "#{testimonial.link}" } Read the case study → - if testimonial.type === "analyst" %a.testimonials-link{ href: "#{testimonial.link}" } Read the analyst report → - if testimonial.type === "review" %a.testimonials-link{ href: "#{testimonial.link}" } See all G2 Crowd reviews → .arrow-container.prev-button.testimonials-prev-button{ "data-controls" => "prev" } = image_tag "/images/home/arrow-left-alt-black.svg", class: "slider-arrow", alt: "Carousel previous arrow" .arrow-container.next-button.testimonials-next-button{ "data-controls" => "next" } = image_tag "/images/home/arrow-right-alt-black.svg", class: "slider-arrow", alt: "Carousel next arrow" %script{src: "https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.7/min/tiny-slider.js", type: "text/javascript"} :javascript var testimonialSlider = tns({ container: '.testimonials-wrapper', arrowKeys: true, items: 1, speed: 800, autoplayButtonOutput: false, viewportMax: true, touch: true, prevButton: '.testimonials-prev-button', nextButton: '.testimonials-next-button', animateDelay: 12000, autoplay: true }); testimonialSlider.play();