Testimonials Slider

Markup

<section class="section section-testimonials pb-large">
  <div class="container">
    <div class="row justify-content-between">
      <div class="col-auto">
        ...
      </div>
      <div class="col-lg-9">
        <div 
          class="slider slider-testimonials swiper-container js-slider" 
          data-autoplay-enabled="true" 
          data-autoplay-delay="9000" 
          data-transition="text"
        >
          ...
        </div>
        <!-- slider DOTS -->
        <div class="slider__dots js-slider__dots" data-arts-os-animation="true" data-arts-os-animation-name="animateJump">
          <div class="slider__dot"></div>
        </div>
        <!-- - slider DOTS -->
      </div>
      <div class="col-lg-1 align-self-center">
        <!-- slider ARROWS -->
        <div class="slider__wrapper-arrows slider__wrapper-arrows_vertical d-lg-flex d-none" data-arts-os-animation="true" data-arts-os-animation-name="animateJump">
          ...
        </div>
        <!-- - slider ARROWS -->
      </div>
    </div>
  </div>
</section>

Elements

• Dots Indicators: .js-slider__dots
• Next Slide Button: .js-slider__arrow-next
• Previous Slide Button: .js-slider__arrow-prev

Slider Attributes

• data-transition – Animation style: [text | auto]
• data-speed – Slider animation speed in milliseconds
• data-autoplay-enabled – Defines if the slider should automatically rotate the slides: [true | false]
• data-autoplay-delay – Slider rotation delay in milliseconds

Showcase

• 📄 011-landing-page-1.html
• 📄 034-services.html