# Projects Slider

Unlike the fullscreen slider, the Projects slider can display multiple items (slides) simultaneously.

# Markup

<section class="section section-fullheight section-slider-projects section-dynamic-background js-slider-background js-slider-projects bg-portfolio-1">
  <div class="section-fullheight__inner section-fullheight__inner_mobile">
    <div class="section-fullheight__header container-fluid pt-xlarge section-slider-projects__header js-slider-projects__header" data-arts-os-animation="true" data-arts-os-animation-name="animateText">
      <h1 
        class="h1 section__heading js-slider-projects__source-indicator js-arts-split-text arts-split-text my-0" 
        data-arts-split-text="lines" 
        data-arts-split-text-set="lines" 
        data-arts-split-text-set-direction="y" 
        data-arts-split-text-set-distance="-100%" 
        data-arts-split-text-overflow-wrap="lines"
      >
        Portfolio
      </h1>
    </div>
    <div 
      class="slider slider-projects swiper-container js-slider-projects__slider" 
      data-centered-slides="true" 
      data-slides-per-view="2.25" 
      data-slides-per-view-tablet="2" 
      data-slides-per-view-mobile="1.25" 
      data-space-between="60" 
      data-space-between-tablet="30" 
      data-space-between-mobile="0" 
      data-autoplay-enabled="true" 
      data-autoplay-delay="6000" 
      data-keyboard-enabled="true" 
      data-mousewheel-enabled="true" 
      data-touch-ratio="2"
      data-drag-mouse="true" 
      data-drag-cursor="true" 
      data-drag-label="Drag" 
      data-drag-hide-cursor="true" 
      data-drag-class="slider-projects-fullscreen__images_scale-up"
    >
      <div class="swiper-wrapper">
        ...
      </div>
      <!-- slider ARROWS -->
      <div
        class="slider__wrapper-arrows slider-projects-fullscreen__arrows slider-projects__arrows" 
        data-arts-os-animation="true" 
        data-arts-os-animation-name="animateJump" 
        data-arts-os-animation-params="{x: 0, y: 30}"
      >
        ...
      </div>
      <!-- - slider ARROWS -->
      <!-- slider SCROLLBAR -->
      <div class="slider-projects__wrapper_bottom-center">
        <div 
          class="slider__wrapper-scrollbar" 
          data-arts-os-animation="true" 
          data-arts-os-animation-name="animateJump" 
          data-arts-os-animation-params="{x: 0, y: 30}"
        >
          <div class="slider__scrollbar slider__scrollbar_horizontal slider__scrollbar_horizontal_long slider-projects__scrollbar js-slider-projects__scrollbar">
            ...
          </div>
        </div>
      </div>
      <!-- - slider SCROLLBAR -->
      <!-- slider INDICATOR [desktop only] -->
      <div 
        class="slider-projects__wrapper_bottom-right text-end overflow d-none d-lg-block" 
        data-arts-os-animation="true" 
        data-arts-os-animation-name="animateJump" 
        data-arts-os-animation-params="{x: 0, y: 30}"
      >
        <div class="slider-projects__indicator js-slider-projects__indicator h6">
          ...
        </div>
      </div>
      <!-- - slider INDICATOR [desktop only] -->
      <div class="is-dragging__blocker"></div>
    </div>
  </div>
</section>

# Elements

Section heading that disappears on slider transition start: .js-slider-projects__source-indicator
Slider indicator that appears on slider transition start: .js-slider-projects__indicator
Progress (scroll bar): .js-slider-projects__scrollbar
Counter (current slide): .js-slider__counter-current
Counter (total slides): .js-slider__counter-total
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 the mouse wheel.
data-keyboard-enabled=[true | false] – Defines if the slider can be controlled using the keyboard.
data-speed – Slider animation speed in milliseconds.
data-counter-add-zeros – Number of zeros 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.

# Special Effects

# Showcase

📄 006-portfolio-fullscreen-slider-horizontal-cards.html
📄 011-landing-page-1.html

← Fullscreen Slider Testimonials Slider →