Easy Responsive Content Slider With jQuery And CSS3

A responsive, fullscreen content slider that comes with a 'Zoom out' animation when transitioning between slides. Based on jQuery, SVG icon, CSS Flex box and CSS3 transitions & transforms.

How to use it:

1. Add html content together with the SVG based navigation arrows into the slider.

<div class="slide one">
  <h2>Content here</h2>
</div>
<div class="slide two">
  <h2>Content here</h2>
</div>
<div class="slide three">
  <h2>Content here</h2>
</div>
<div class="slide four">
  <h2>Content here</h2>
</div>
<div class="slide five">
  <h2>Content here</h2>
</div>

2. The CSS to position the navigation arrows.

svg {
  position: absolute;
  top: 50%;
  height: 5em;
  width: 5em;
  margin-top: -2.5em;
  cursor: pointer;
}

svg#next {
  right: 1em;
}

svg#previous {
  display: none;
  left: 1em;
}

3. The core CSS/CSS3 styles for the slides.

.slide {
  display: flex;
  -webkit-display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}

4. Create the 'Zoom out' effect using CSS3 2D transforms.

.zoomout {
  transform: scale(0.7);
  -moz-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -o-transform: scale(0.7);
  -ms-transform: scale(0.7);
}

5. Place the needed jQuery JavaScript library at the end of the document.

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

6. The core JavaScript (jQuery script) to active the slider.

var timer = 0;
var elementCount = 0;
var firstPos = 0;
var lastPos = 0;

$(function() {
  initialiseSlider();
  $("#next").click(function() {
    slideRight();
  });

  $("#previous").click(function() {
    slideLeft();
  });
});

function initialiseSlider() {
  $("div").each(function(value) {
    elementCount += 1;
    var position = -100 * value;
    $(this).css("left", position + "%");
  });

  if (elementCount === 1)
    $("#next").hide();
}

function slideRight() {
  $("div").each(function(value) {
    $(this).addClass("zoomout");
    var position = parseInt($(this)[0].style.left) + 100;

    if (value === 0)
      firstPos = position;

    $(this).css("left", position + "%");
    timer = setTimeout(removeZoom, 1000);
  });

  console.log(firstPos);

  if (firstPos !== ((elementCount - 1) * 100)) {
    $("#next").show();
    $("#previous").show();
  } else
    $("#next").hide();
}

function slideLeft() {
  $("div").each(function(value) {
    $(this).addClass("zoomout");
    var position = parseInt($(this)[0].style.left) - 100;

    if (value === (elementCount - 1))
      lastPos = position;

    $(this).css("left", position + "%");
    timer = setTimeout(removeZoom, 1000);
  });

  console.log(lastPos);

  if (lastPos !== ((elementCount - 1) * -100)) {
    $("#previous").show();
    $("#next").show();
  } else
    $("#previous").hide();
}

function removeZoom() {
  $("div").each(function() {
    $(this).removeClass("zoomout");
  });
}

---

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