Touchable Fullscreen Parallax Image Sldier With jQuery And CSS3

A cool, responsive, touch-compatible and fullscreen jQuery background image slider which makes use of CSS3 transitions and 3D transforms to create a horizontal parallax scroll effect when sliding between slides via mouse drag or touch swipe.

How to use it:

1. The basic HTML template for the image slider.

<div class="parallax-slider">
  <div class="slides">
    <div class="slide slide-1">
      <div class="bg bg-1">
        <div class="overlay">Slide #1</div>
        <span class="hint">This is Slide 1</span> </div>
    </div>
    <div class="slide slide-2">
      <div class="bg bg-2">
        <div class="overlay">Slide #2</div>
        <span class="hint">This is Slide 2</span> </div>
    </div>
    <div class="slide slide-3">
      <div class="bg bg-3">
        <div class="overlay">Slide #3</div>
        <span class="hint">This is Slide 3</span> </div>
    </div>
    <div class="slide slide-4">
      <div class="bg bg-4">
        <div class="overlay">Slide #4 </div>
        <span class="hint">This is Slide 4</span> </div>
      </div>
    </div>
    <div class="slide slide-5">
      <div class="bg bg-5">
        <div class="overlay">Slide #5.</div>
        <span class="hint">This is Slide 5</span> </div>
      </div>
    </div>
  </div>
  <div class="slide-indicator">
    <div where="1" class="dot dot-1"></div>
    <div where="2" class="dot dot-2"></div>
    <div where="3" class="dot dot-3"></div>
    <div where="4" class="dot dot-4"></div>
    <div where="5" class="dot dot-5"></div>
  </div>
  <div class="property-hack"></div>
</div>

2. The core CSS styles for the slider.

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

.property-hack {
  display: none;
  width: 200px;
  height: 500px;
  margin-left: 8000px;
}

.parallax-slider {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: -webkit-grab;
  cursor: grab;
  background: #333;
}

.slides {
  width: 500%;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slide {
  width: 100vw;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
}

.bg {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.bg-2 {
  -webkit-transform: translate3d(-50vw, 0, 0);
  transform: translate3d(-50vw, 0, 0);
}

.animation {
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

3. Add background images to the slider.

.bg-1 { background-image: url("1.jpg"); }

.bg-2 { background-image: url("2.jpg"); }

.bg-3 { background-image: url("3.jpg"); }

.bg-4 { background-image: url("4.jpg"); }

.bg-5 { background-image: url("5.jpg"); }

4. Style the bottom pagination dots and caption overlays.

.overlay {
  width: 100vw;
  height: 75px;
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: "Bad Script", sans-serif;
  font-size: 1.5rem;
  text-align: center;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  opacity: 0;
}

.overlay-active {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.hint {
  background: transparent;
  position: absolute;
  top: 10%;
  width: 100%;
  text-align: center;
  font-family: "Bad Script", sans-serif;
  color: white;
  font-size: 1.2rem;
  z-index: 1;
}

@media only screen and (max-width: 360px) {

  .slide-indicator {
    bottom: 15px;
    height: 15px;
    width: 95px;
  }

  .dot {
    width: 15px;
    height: 15px;
  }

  .overlay {
    padding-top: 8px;
    font-size: 1.2rem;
  }
  
}

5. Place the latest version of jQuery JavaScript library at the end of the document.

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

6. The jQuery script to enable the parallax slider.

$(document).ready(function() {
  var curX = 0;
  var diff = 0;
  var curSlide = 1;
  var busy = false;
  var flag = false;
  var winW = parseInt($(".demo-container").css("width"));
  var animationTime = parseFloat($(".property-hack").css("height"));
  var k = parseFloat($(".property-hack").css("width")) / 100;
  var numOfSlides = $(".slide").length;
  var autoChangeTime = parseFloat($(".property-hack").css("margin-left"));
  var autoChangeInterval = setInterval(autoChangeFunction, autoChangeTime);
  $(".slide-1 .overlay").addClass("overlay-active");
  $(window).on("keydown", function(event) {
  if (!busy) {
   if (event.which == 37 && curSlide >= 2) {
    curSlide--;
    animation();
   }
   if (event.which == 39 && curSlide < numOfSlides) {
    curSlide++;
    animation();
   }
  }
  });
  $(".dot").on("click", function() {
  if (!busy) {   
   curSlide = parseInt($(this).attr("where"));
   animation(true);   
  }
  });
  $(document).on("mousedown touchstart", ".slides", function(event) {
  if (!busy) {
   clearInterval(autoChangeInterval);
   flag = true;
   $(".demo-container").addClass("grabbing");
   winW = parseInt($(".demo-container").css("width"));
   if (event.originalEvent.touches) var stX = event.originalEvent.touches[0].pageX;
   else var stX = event.pageX;
   $(document).on("mousemove touchmove", function(event) {
    if (event.originalEvent.touches) var msX = event.originalEvent.touches[0].pageX;
    else var msX = event.pageX;
    diff = (msX - stX) / winW * 100 / k;
    if (diff > 110) diff = 110;
    if (diff < -110) diff = -110;
    if (curSlide == 1) {
     if (diff > 0) diff /= 10;
     if (diff > 5) diff = 5;
    }
    if (curSlide == numOfSlides) {
     if (diff < 0) diff /= 10;
     if (diff < -5) diff = -5;
    }
    $(".slides").css("transform", "translate3d(" + (diff + curX) + "vw, 0, 0)");
    $(".bg-" + curSlide).css("transform", "translate3d(" + (-diff / 2) + "vw, 0, 0)");
    $(".bg-" + (curSlide + 1)).css("transform", "translate3d(" + (-50 - diff / 2) + "vw, 0, 0)");
    $(".bg-" + (curSlide - 1)).css("transform", "translate3d(" + (50 - diff / 2) + "vw, 0, 0)");
   });
  }
  });
  $(document).on("mouseup touchend", function(event) {
  if (flag) {
   if (diff * k < -30) curSlide++;
   else if (diff * k > 30)
    curSlide--;
   animation();
   diff = 0;
   $(document).off("mousemove");
   $(".demo-container").removeClass("grabbing");
   flag = false;
  }
  });

  function animation(r) {
  busy = true;
  curX = (-curSlide + 1) * 100;
  $(".overlay").removeClass("overlay-active");  
  $(".slide-" + curSlide + " .overlay").addClass("overlay-active");
  $(".dot").css("opacity", "0.3");
  $(".dot-" + curSlide).css("opacity", "1");
  $(".slides").addClass("animation");
  if (!r)  $(".bg").addClass("animation");
  else $(".bg").css("transform", "translate3d(0, 0, 0)");
  $(".slides").css("transform", "translate3d(-" + (curSlide - 1) * 100 + "vw, 0, 0)");
  $(".bg").css("transform", "translate3d(0, 0, 0)");
  if (!r) {
   $(".bg-" + (curSlide + 1) + ", .bg-" + (curSlide + 2)).css("transform", "translate3d(-50vw, 0, 0)");
   $(".bg-" + (curSlide - 1) + ", .bg-" + (curSlide - 2)).css("transform", "translate3d(50vw, 0, 0)");
  }
  clearInterval(autoChangeInterval);
  setTimeout(function() {
   $(".slides, .bg").removeClass("animation");
   busy = false;
   $(".bg-" + (curSlide + 1)).css("transform", "translate3d(-50vw, 0, 0)");   
   autoChangeInterval = setInterval(autoChangeFunction, autoChangeTime);
  }, animationTime);
  }

  function autoChangeFunction() {
  if (curSlide != numOfSlides) {
   curSlide++;
   animation();
  }
  else {
   curSlide = 1;
   animation(true);
  }
  }
});

---

This awesome jQuery plugin is developed by kiyutink. For more Advanced Usages, please check the demo page or visit the official website.