# Fullscreen Slider

There are multiple layouts of the fullscreen sliders in the template. Each fullscreen slider is built by chaining multiple sliders.

# Markup

<section class="section section-dynamic-background section-fullheight section-slider-projects-fullscreen js-slider-background bg-portfolio-1" data-arts-os-animation="true">
  <div class="section-fullheight__inner section-fullheight__inner_mobile">
    <div class="slider slider-projects-fullscreen js-slider js-slider-projects-fullscreen" data-arts-hover-class="hover-zoom-underline">
      <div class="container-fluid h-100 slider-projects-fullscreen__fluid-container">
        <div class="row h-100 align-items-center mx-0 flex-lg-nowrap">
          <!-- slider CONTENT -->
          <div class="col-auto slider-projects-fullscreen__col-content pr-small pl-0">
            <div class="slider-projects-fullscreen__content swiper-container js-slider-projects-fullscreen__content overflow-initial" data-auto-height="true" data-transition="text" data-transition-direction="horizontal">
              ...
            </div>
          </div>
          <!-- - slider CONTENT -->
          <!-- slider IMAGES -->
          <div class="col-auto slider-projects-fullscreen__col-images h-100 px-0 mask-reveal" data-arts-os-animation="true" data-arts-os-animation-name="animateMask" data-arts-os-animation-params="{direction: 'right'}">
            <div class="mask-reveal__layer mask-reveal__layer-1">
              <div class="mask-reveal__layer mask-reveal__layer-2">
                <div class="slider-projects-fullscreen__images swiper-container js-slider-projects-fullscreen__images" data-direction="horizontal" data-keyboard-enabled="true" data-mousewheel-enabled="true" data-speed="1000" data-counter-add-zeros="1">
                  ...
                </div>
              </div>
            </div>
          </div>
          <!-- - slider IMAGES -->
        </div>
      </div>
      <!-- slider SIDE BACKGROUND -->
      <div class="slider-projects-fullscreen__sidebar section-dynamic-background bg-white-1 js-slider-projects-fullscreen__sidebar" data-arts-os-animation="true" data-arts-os-animation-name="animateScale" data-arts-os-animation-params="{direction: 'right'}">
        ...
      </div>
      <!-- - slider SIDE BACKGROUND -->
      <!-- slider COUNTER -->
      <div class="slider__wrapper-counter slider-projects-fullscreen__counter text-end" data-arts-os-animation="true" data-arts-os-animation-name="animateJump" data-arts-os-animation-params="{x: 0, y: 30}">
        <div class="slider__counter slider__counter_current small js-slider__counter-current">01</div>
        <div class="slider__counter slider__counter_total small js-slider__counter-total">06</div>
      </div>
      <!-- - slider COUNTER -->
      <!-- slider ARROWS -->
      <div class="slider__wrapper-arrows slider-projects-fullscreen__arrows" data-arts-os-animation="true" data-arts-os-animation-name="animateJump" data-arts-os-animation-params="{x: 0, y: 30}">
        ...
      </div>
      <!-- - slider ARROWS -->
    </div>
  </div>
</section>

# Elements

Slider Images .js-slider-projects-fullscreen__images
Slider Content .js-slider-projects-fullscreen__content
Slider Thumbnails .js-slider-projects-fullscreen__thumbs, showcase page 📄 005-portfolio-fullscreen-slider-bottom-navigation.html
Progress bar (scroll bar) .js-slider-projects-fullscreen__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 Images attributes

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-direction=[horizontal | vertical] - slider animation direction.
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.

# Slider Content attributes

data-transition=[text | auto] – animation style.
data-direction=[horizontal | vertical] - animation direction.
data-prefetch-active-slide-transition=[true | false] - when set to true, the inner slide links will be prefetched after the animation to that slide. This speeds up the AJAX navigation.

# Special Effects

# Showcase

📄 001-portfolio-fullscreen-slider-background-color-1.html
📄 002-portfolio-fullscreen-slider-background-color-2.html
📄 003-portfolio-fullscreen-slider-background-image-1.html
📄 004-portfolio-fullscreen-slider-background-image-2.html
📄 005-portfolio-fullscreen-slider-bottom-navigation.html
📄 009-portfolio-halfscreen-slider-vertical-1.html
📄 010-portfolio-halfscreen-slider-vertical-2.html

← Menu Projects Slider →