Slider Testimonials

Customization	Reference
HTML selector	🔧 [data-arts-component-name="SliderTestimonials"]
Component source	📄 HTML/js/components/SliderTestimonials.js
Component source (gulp)	📄 SOURCE/components/sliderTestimonials/SliderTestimonials.js

Default Options

defaults: {
  keyboard: false,
  controls: true,
  direction: 'horizontal',
  loop: true,
  autoplay: 8,
  transitionDuration: 1.2
}

HTML Markup

<div
  class="slider-testimonials text-center js-slider-testimonials"
  data-arts-component-name="SliderTestimonials"
  data-arts-component-options="{}"
>
  <!-- Content -->
  <div class="slider-testimonials__container">
    <!-- Slide #1 -->
    <div class="container slider-testimonials__item js-slider-testimonials__section">
      ...
    </div>
    <!-- Slide #2 -->
    <div class="container slider-testimonials__item js-slider-testimonials__section">
      ...
    </div>
    <!-- Slide #3 -->
    <div class="container slider-testimonials__item js-slider-testimonials__section">
      ...
    </div>
  </div>
  <!-- - Content -->
  
  <!-- Dots -->
  <div class="slider-testimonials__dots color-accent-dark-theme mt-4">
    <div class="slider-testimonials__dot" data-arts-fullpage-slider-indicator="0">
      ...
    </div>
    <div class="slider-testimonials__dot" data-arts-fullpage-slider-indicator="1">
      ...
    </div>
    <div class="slider-testimonials__dot" data-arts-fullpage-slider-indicator="2">
      ...
    </div>
  </div>
  <!-- - Dots -->
  
  <!-- Arrows -->
  <div class="slider-arrow slider-testimonials__arrow slider-testimonials__arrow-prev">
    ...
  </div>
  <div class="slider-arrow slider-testimonials__arrow slider-testimonials__arrow-next">
    ...
  </div>
  <!-- - Arrows -->
</div>