Press "Enter" to skip to content

Responsive Fullscreen Draggable Image Parallax Slider With jQuery

Fullscreen drag slider with parallax is a responsive jQuery & CSS3 powered full-screen image slider that allows you to move between an image using mouse drag or touch scroll, with precise parallax scrolling effects based on CSS3 transitions and transitions.

draggable slider jquery codepen, javascript draggable slider, pure css image slider, mouse drag slider javascript, gsap draggable slider

Customizable, Draggable, and Infinitely Looping Carousels | Jelly Slider

How to make use of it:

1. Build the HTML structure of the image slider.

<div class="slider-container">
  <div class="slider-control left inactive"></div>
  <div class="slider-control right"></div>
  <div class="slider">
    <div class="slide slide-0 active">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>
        <div class="slide__text">
          <h2 class="slide__text-heading">Image 1</h2>
          <p class="slide__text-desc">Image Description 1.</p>
          <a class="slide__text-link">Linke 1</a>
        </div>
      </div>
    </div>
    <div class="slide slide-1 ">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>
        <div class="slide__text">
          <h2 class="slide__text-heading">Image 2</h2>
          <p class="slide__text-desc">Image Description 2.</p>
          <a class="slide__text-link">Linke 2</a>
        </div>
      </div>
    </div>
    <div class="slide slide-2">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>
        <div class="slide__text">
          <h2 class="slide__text-heading">Image 3</h2>
          <p class="slide__text-desc">Image Description 3.</p>
          <a class="slide__text-link">Linke 3</a>
        </div>
      </div>
    </div>
    <div class="slide slide-3">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>
        <div class="slide__text">
          <h2 class="slide__text-heading">Image 4</h2>
          <p class="slide__text-desc">Image Description 4.</p>
          <a class="slide__text-link">Linke 4</a>
        </div>
      </div>
    </div>
  </div>
</div>

2. Basic CSS Styles.

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
  font-family: 'roboto', sans-serif
}

body { background: #000; }

svg {
  display: block;
  overflow: visible;
}

.slider-container {
  position: relative;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: all-scroll;
}

.slider-control {
  z-index: 2;
  position: absolute;
  top: 0;
  width: 12%;
  height: 100%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0;
}

.slider-control.inactive:hover { cursor: auto; }

.slider-control:not(.inactive):hover {
  opacity: 1;
  cursor: pointer;
}

.slider-control.left {
  left: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}

.slider-control.right {
  right: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.slider {
  z-index: 1;
  position: relative;
  height: 100%;
}

.slider.animating {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.slider.animating .slide__bg {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

3. Slide style and add your own photos using the background image in the slider.

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide.active .slide__overlay,
.slide.active .slide__text {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.slide__bg {
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.slide:nth-child(1) { left: 0; }

.slide:nth-child(1) .slide__bg {
  left: 0;
  background-image: url("1.jpg");
}

.slide:nth-child(1) .slide__overlay-path { fill: #e99c7e; }

@media (max-width: 991px) {

.slide:nth-child(1) .slide__text { background-color: rgba(233, 156, 126, 0.8); }

}

.slide:nth-child(2) { left: 100%; }

.slide:nth-child(2) .slide__bg {
  left: -50%;
  background-image: url("2.jpg");

}

.slide:nth-child(2) .slide__overlay-path { fill: #e1ccae; }

@media (max-width: 991px) {

.slide:nth-child(2) .slide__text { background-color: rgba(225, 204, 174, 0.8); }

}

.slide:nth-child(3) { left: 200%; }

.slide:nth-child(3) .slide__bg {
  left: -100%;
  background-image: url("3.jpg");
}

.slide:nth-child(3) .slide__overlay-path { fill: #adc5cd; }

@media (max-width: 991px) {

.slide:nth-child(3) .slide__text { background-color: rgba(173, 197, 205, 0.8); }

}

.slide:nth-child(4) { left: 300%; }

.slide:nth-child(4) .slide__bg {
  left: -150%;
  background-image: url("4.jpg");
}

.slide:nth-child(4) .slide__overlay-path { fill: #cbc6c3; }

@media (max-width: 991px) {

.slide:nth-child(4) .slide__text { background-color: rgba(203, 198, 195, 0.8); }

}

.slide__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

4. Required CSS Styles for SVG Overlays.

.slide__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  min-height: 810px;
  -webkit-transition: -webkit-transform 0.5s 0.5s, opacity 0.2s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
  -webkit-transform: translate3d(-20%, 0, 0);
  transform: translate3d(-20%, 0, 0);
  opacity: 0;
}

@media (max-width: 991px) {

.slide__overlay { display: none; }

}

.slide__overlay path { opacity: 0.8; }

.slide__text {
  position: absolute;
  width: 25%;
  bottom: 15%;
  left: 12%;
  color: #fff;
  -webkit-transition: -webkit-transform 0.5s 0.8s, opacity 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
}

@media (max-width: 991px) {

.slide__text {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20rem;
  text-align: center;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
  -webkit-transition: -webkit-transform 0.5s 0.5s, opacity 0.5s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
  padding: 0 1rem;
}

}

.slide__text-heading {
  font-family: "roboto", Helvetica, Arial, sans-serif;
  font-size: 5rem;
  margin-bottom: 2rem;
}

@media (max-width: 991px) {

.slide__text-heading {
  line-height: 20rem;
  font-size: 3.5rem;
}

}

.slide__text-desc {
  font-family: "roboto", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 991px) {

.slide__text-desc { display: none; }

}

.slide__text-link {
  z-index: 5;
  display: inline-block;
  position: relative;
  padding: 0.5rem;
  cursor: pointer;
  font-family: "roboto", Helvetica, Arial, sans-serif;
  font-size: 2.3rem;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

@media (max-width: 991px) {

.slide__text-link { display: none; }

}

.slide__text-link:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotateX(-85deg);
  transform: rotateX(-85deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.slide__text-link:hover:before {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}

5. Download the latest version of the jQuery JavaScript library to your web page.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> 

6. The core of JavaScript to enable the image slider.

$(document).ready(function() {
  
  var $slider = $(".slider"),
      $slideBGs = $(".slide__bg"),
      diff = 0,
      curSlide = 0,
      numOfSlides = $(".slide").length-1,
      animating = false,
      animTime = 500;
  
  function manageControls() {
    $(".slider-control").removeClass("inactive");
    if (!curSlide) $(".slider-control.left").addClass("inactive");
    if (curSlide === numOfSlides) $(".slider-control.right").addClass("inactive");
  }
  
  function changeSlides(instant) {
    if (!instant) {
      animating = true;
      manageControls();
      $slider.addClass("animating");
      $slider.css("top");
      $(".slide").removeClass("active");
      $(".slide-"+curSlide).addClass("active");
      setTimeout(function() {
        $slider.removeClass("animating");
        animating = false;
      }, animTime);
    }
    $slider.css("transform", "translate3d("+ -curSlide*100 +"%,0,0)");
    $slideBGs.css("transform", "translate3d("+ curSlide*50 +"%,0,0)");
    diff = 0;
  }

  function navigateLeft() {
    if (animating) return;
    if (curSlide > 0) curSlide--;
    changeSlides();
  }

  function navigateRight() {
    if (animating) return;
    if (curSlide < numOfSlides) curSlide++;
    changeSlides();
  }

  $(document).on("mousedown touchstart", ".slider", function(e) {
    if (animating) return;
    var startX = e.pageX || e.originalEvent.touches[0].pageX;
    diff = 0;
    
    $(document).on("mousemove touchmove", function(e) {
      var x = e.pageX || e.originalEvent.touches[0].pageX;
      diff = (startX - x) / $(window).width() * 70;
      if ((!curSlide && diff < 0) || (curSlide === numOfSlides && diff > 0)) diff /= 2;
      $slider.css("transform", "translate3d("+ (-curSlide*100 - diff) +"%,0,0)");
      $slideBGs.css("transform", "translate3d("+ (curSlide*50 + diff/2) +"%,0,0)");
    });
  });
  
  $(document).on("mouseup touchend", function(e) {
    $(document).off("mousemove touchmove");
    if (animating) return;
    if (!diff) {
      changeSlides(true);
      return;
    }
    if (diff > -8 && diff < 8) {
      changeSlides();
      return;
    }
    if (diff <= -8) {
      navigateLeft();
    }
    if (diff >= 8) {
      navigateRight();
    }
  });
  
  $(document).on("click", ".slider-control", function() {
    if ($(this).hasClass("left")) {
      navigateLeft();
    } else {
      navigateRight();
    }
  });
  
});

Responsive Draggable Image Slider, Fullscreen drag-slider with parallax Plugin/Github


See Demo And Download

Official Website(suez): Click Here

This superior jQuery/javascript plugin is developed by suez. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *