Rhye

# Fullscreen Sliders

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

  • Slider Images
  • Slider Content
  • Slider Footer
  • Slider Counter

# Markup

All the main slider options are set from Slider Images.

<section class="section section-fullheight section-projects section-projects-slider bg-dark-1 overflow" data-arts-theme-text="light" data-arts-os-animation>
  <div class="section-fullheight__inner section-fullheight__inner_mobile text-center">
    <div class="slider slider-fullscreen-projects js-slider-fullscreen-projects js-slider">
      <!-- slider CONTENT -->
      <div class="slider-fullscreen-projects__content swiper-container js-slider-fullscreen-projects__content">
        ...
      </div>
      <!-- - slider CONTENT -->
      <!-- slider IMAGES -->
      <div
        class="slider-fullscreen-projects__images swiper-container js-slider-fullscreen-projects__images"
        data-mousewheel-enabled="true"
        data-direction="horizontal"
        data-transition-effect="distortion"
        data-aspect-ratio="1.5"
        data-transition-displacement-img="img/general/bg-displacement-7.jpg"
        data-speed="1200"
        data-autoplay-enabled="true"
        data-autoplay-delay="6000"
        data-counter-style="roman"
        data-touch-ratio="1.5"
        data-drag-mouse="true"
        data-drag-cursor="true"
        data-drag-class="slider-fullscreen-projects__images_scale-up"
        >
        ...
      </div>
      <!-- - slider IMAGES -->
      <!-- slider FOOTER -->
      <div class="slider-fullscreen-projects__footer swiper-container js-slider-fullscreen-projects__footer">
        ...
      </div>
      <!-- - slider FOOTER -->
      <!-- slider COUNTER -->
      <div class="slider__wrapper-counter slider-fullscreen-projects__counter">
        ...
      <!-- - slider COUNTER -->
      <!-- slider ARROWS -->
      <div class="slider__arrow slider__arrow_left slider__arrow_absolute js-slider__arrow-prev">
        ...
      </div>
      <div class="slider__arrow slider__arrow_right slider__arrow_absolute js-slider__arrow-next">
        ...
      </div>
      <!-- - slider ARROWS -->
      <!-- slider CANVAS -->
      <div class="slider__wrapper-canvas">
        ...
      </div>
      <!-- - slider CANVAS -->
    </div>
  </div>
</section>
# Slider Images attributes
  • data-mousewheel-enabled=[true | false] - defines if the slider can be controlled using mousewheel
  • data-direction=[horizontal | vertical] - slider animation direction
  • data-transition-effect=[distortion | enterLeave] – slider animation style.
  • data-aspect-ratio – aspect ratio of the slider images. Used only for distortion effect.
  • data-transition-displacement-img – displacement image. Used only for distortion effect.
  • data-speed – slider animation speed in milliseconds.
  • data-autoplay-enabled=[true | false] – defines if the slider should automatically rotate the slides.
  • data-autoplay-delay – slider rotation delay in milliseconds.
  • data-counter-style [roman | arabic] – slides counter numerals style.
  • 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.
  • data-drag-cursor=[true | false] – defines if the dragging cursor helper should appear. Requires enabled mouse cursor follower.
  • data-drag-class – appended slider class when starting to drag the slider. It will be removed after the dragging finishes.

# Distortion Effect Requirements

  • You MUST use a web-server to see the effect in live. The images won't be loaded as textures if you just open *.html file via OS filesystem.
  • All the images inside the slider MUST BE the same aspect ratio.
  • data-aspect-ratio attribute MUST BE explicitly set.
    • Example #1: Landscape 1920x1280 images are 1920 / 1280 = 1.5 aspect ratio.
    • Example #2: Portrait 1080x1920 images are 1080 / 1920 = 0.5625 aspect ratio.
    • Example #3: Square 960x960 images are 960 / 960 = 1.0 aspect ratio.
  • It's recommended to have all the slider images of the same width and height.
  • Images URLs should be placed in data-texture-src attribute in Slider Images.
<div
  class="slider__bg lazy-bg js-transition-img__transformed-el"
  data-texture-src="img/assets/projects/project-1.jpg"
  >
</div>

← Mouse Hover Reveal →