Kinsey

# Images Slider

# Markup

<section class="section section-slider-images bg-light-3 pb-large container">
  <div>
    <div class="slider slider-images js-slider-images text-center">
      <div 
        class="slider-images__slider swiper-container js-slider-images__slider" 
        data-auto-height="true" 
        data-autoplay-enabled="true" 
        data-autoplay-delay="6000" 
        data-slides-per-view-tablet="1.5" 
        data-slides-per-view-mobile="1.25" 
        data-centered-slides="false"
        data-centered-slides-tablet="true" 
        data-centered-slides-mobile="true" 
        data-drag-mouse="true" 
        data-drag-cursor="true" 
        data-drag-label="Drag" 
        data-drag-hide-cursor="true" 
        data-drag-class="slider-images_scale-up" 
        data-keyboard-enabled="true" 
        data-touch-ratio="2"
      >
        ...
      </div>
      <!-- slider CAPTIONS -->
      <div
        class="slider-images__captions swiper-container js-slider-images__captions mt-xsmall" 
        data-slides-per-view="3" 
        data-slides-per-view-tablet="1.5" 
        data-slides-per-view-mobile="1.25" 
        data-centered-slides="true" 
        data-centered-slides-tablet="true" 
        data-centered-slides-mobile="true" 
        data-arts-os-animation="true" 
        data-arts-os-animation-name="animateJump"
      >
        ...
      </div>
      <!-- - slider CAPTIONS -->
      <!-- slider ARROWS -->
      <div class="slider__arrow slider__arrow_absolute slider__arrow_left js-slider__arrow-prev" data-arts-os-animation="true" data-arts-os-animation-name="animateJump" data-arts-os-animation-params="{x: -30, y: 0}">
        ...
      </div>
      <!-- - slider ARROWS -->
    </div>
  </div>
</section>

# Elements

  • Captions Slider (optional): .js-slider-images__captions
  • Captions Underline: .js-slider-images__underline
  • Progress (scroll bar): .js-slider__scrollbar
  • Next Slide Button: .js-slider__arrow-next
  • Previous Slide Button: .js-slider__arrow-prev

# Slider Attributes

  • data-centered-slides [true | false] – Defines if the slides should appear centered.
  • data-slides-per-view [2.25] – Number of slides per view. Responsive option.
  • data-space-between [60] – Gutters between slides. 60 means 60px. Responsive option.
  • data-mousewheel-enabled [true | false] – Defines if the slider can be controlled using mousewheel.
  • data-keyboard-enabled [true | false] – Defines if the slider can be controlled using keyboard.
  • data-speed – Slider animation speed in milliseconds.
  • data-counter-add-zeros – Zeros amount to prepend in the counter.
  • data-autoplay-enabled [true | false] – Defines if the slider should automatically rotate the slides.
  • data-autoplay-delay – Slider rotation delay in milliseconds.
  • data-touch-ratio – Touch multiplier. 1.0 means the exact movement after the finger.
  • data-drag-mouse [true | false] – Defines if the slider can be controlled by mouse click & drag gesture.

The following attributes require the enabled Mouse Cursor Follower:

  • data-drag-cursor [true | false] – Defines if the dragging cursor helper should appear.
  • data-drag-label [Drag] – Dragging label.
  • data-drag-class – Appended slider class when starting to drag the slider. It will be removed after the dragging finishes.
  • data-drag-scale [1.7] – Cursor scaling multiplier. 1.0 means no scaling applied.
  • data-drag-icon [material-icons add] – Optional dragging icon class. This can be used instead of the label.
  • data-drag-distance [50] – Distance for the arrows. 50 means 50px far from the cursor center.
  • data-drag-hide-cursor [true | false] – Defines if the native mouse cursor should be hidden during the dragging gesture.

# Showcase

  • 📄 015-portfolio-details-masthead-boxed-vertical.html
  • 📄 017-portfolio-details-masthead-fullwidth-horizontal.html
  • 📄 019-portfolio-details-masthead-boxed-horizontal.html
  • 📄 023-portfolio-details-masthead-fullwidth-horizontal.html
  • 📄 024-portfolio-details-masthead-boxed-vertical.html
  • 📄 034-services.html

← Grid →