Touch-friendly Animated Slider with jQuery and CSS3

A mobile-friendly, responsive, animated, generic slider component made with jQuery, jQuery Mobile and CSS3. It comes with a fancy 'Cross-slide' effect based on several CSS3 animation properties.

How to use it:

1. The basic markup structure for the slider.

<div class="slider-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

2. Add SVG based navigation arrows to the slider.

<div class="prev">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 612 612">
    <g>
      <path fill="white" d="M421.133,267.75H287.965l0.803-4.973l42.61-43.012c13.426-13.56,16.696-35.267,5.604-50.796
        c-14.096-19.718-41.482-21.343-57.796-4.877L164.131,280.258C156.997,287.43,153,297.164,153,307.358
        c0,10.175,3.997,19.908,11.112,27.101l114.75,113.469c14.822,14.976,38.842,14.976,53.666,0
        c14.841-14.975,14.841-39.226,0-54.182L282.17,344.25h138.962c20.923,0,37.867-16.944,37.867-37.868v-0.765
        C459,284.714,442.036,267.75,421.133,267.75z M306,0C136.992,0,0,136.992,0,306s136.992,306,306,306s306-136.992,306-306
        S475.008,0,306,0z M306,535.5C179.45,535.5,76.5,432.55,76.5,306S179.45,76.5,306,76.5S535.5,179.45,535.5,306
        S432.55,535.5,306,535.5z"/>
    </g>
  </svg>
</div>

<div class="next">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 612 612">
    <g>
      <path fill="white" d="M421.133,267.75H287.965l0.803-4.973l42.61-43.012c13.426-13.56,16.696-35.267,5.604-50.796
        c-14.096-19.718-41.482-21.343-57.796-4.877L164.131,280.258C156.997,287.43,153,297.164,153,307.358
        c0,10.175,3.997,19.908,11.112,27.101l114.75,113.469c14.822,14.976,38.842,14.976,53.666,0
        c14.841-14.975,14.841-39.226,0-54.182L282.17,344.25h138.962c20.923,0,37.867-16.944,37.867-37.868v-0.765
        C459,284.714,442.036,267.75,421.133,267.75z M306,0C136.992,0,0,136.992,0,306s136.992,306,306,306s306-136.992,306-306
        S475.008,0,306,0z M306,535.5C179.45,535.5,76.5,432.55,76.5,306S179.45,76.5,306,76.5S535.5,179.45,535.5,306
        S432.55,535.5,306,535.5z"/>
    </g>
  </svg>
</div>

3. The primary CSS styles for the slider.

.slider-container {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  height: 500px;
}

.slider-container div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  z-index: 0;
}

.slider-container div:first-child {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

4. Style and position the navigation arrows.

.prev, .next {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  z-index: 20;
  cursor: pointer;
  width: 30px;
  height: 30px;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.prev:hover, .next:hover { opacity: 1; }

.prev { left: 15px; }

.next {
  right: 15px;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

:focus { outline: none; }

5. Include the necessary jQuery library at the bottom of your webpage.

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

6. Include the jQuery mobile library for touch gestures support (OPTIONAL).

<script src='//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'></script> 

7. The core JavaScript to active the slider.

var toIndex = 0,
  fromIndex = 0,
  items = $('.slider-container div'),
  itemAmt = items.length - 1;

function toNext() {

  var item = items.eq(toIndex);
  item.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(0%)',
    'z-index': '1'
  });

  if (toIndex == 0) {
    fromIndex = itemAmt;
  } else {
    fromIndex = toIndex - 1;
  }

  var fromItem = items.eq(fromIndex);
  fromItem.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(-100%)',
    'z-index': '-1'
  });

}

function toPrev() {
  if (toIndex == itemAmt) {
    fromIndex = 0;
  } else {
    fromIndex = toIndex + 1;
  }

  var fromItem = items.eq(fromIndex);
  fromItem.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(-100%)',
    'z-index': '-1'
  });

  var item = items.eq(toIndex);
  item.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(0%)',
    'z-index': '1'
  });
}

var autoSlide = setInterval(function() {
  toIndex += 1;
  if (toIndex > itemAmt) {
    toIndex = 0;
  }
  toNext();
}, 3000);

function nextClick() {
  clearInterval(autoSlide);
  toIndex += 1;
  if (toIndex > itemAmt) {
    toIndex = 0;
  }
  toNext();
}

function prevClick() {
  clearInterval(autoSlide);
  toIndex -= 1;
  if (toIndex < 0) {
    toIndex = itemAmt;
  }
  toPrev();
}

$('.next').click(nextClick);

$('.prev').click(prevClick);

$('.slider-container div').on('swiperight', nextClick);
$('.slider-container div').on('swipeleft', prevClick);

---

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