Infinite Image Carousel Slider Plugin with jQuery and CSS3 - slidr

Just another jQuery responsive and touch-enabled carousel / slider plugin that loops through a list of images with numerious cool transition effects based on CSS3 transforms and transitions.

How to use it:

1. Place your slider images into an html list.

<ul class="slidr">
  <li><img src="1.jpg" alt="Image 1"></li>
  <li><img src="2.jpg" alt="Image 2"></li>
  <li><img src="3.jpg" alt="Image 3"></li>
  ...
</ul>

2. Place jQuery library and the jQuery slidr plugin at the end of the html document.

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

3. The required CSS styles for the slider plugin.

.slidr-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slidr-container.init .slidr {
  opacity: 1;
  visibility: visible;
}

.slidr {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.slidr.animating > * {
  -webkit-transition-property: all;
  transition-property: all;
}

.slidr.animating > *.fade { opacity: 1; }

.slidr.animating > *.scale {
  border-radius: 0;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.slidr.animating > *.wipe.left, .slidr.animating > *.wipe.right {
  -webkit-transform: translateZ(0) translateX(0);
  transform: translateZ(0) translateX(0);
}

.slidr.animating > *.wipe-out.left {
  -webkit-transform: translateZ(0) translateX(100%);
  transform: translateZ(0) translateX(100%);
}

.slidr.animating > *.wipe-out.right {
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
}

.slidr.animating > *.horizontal.left {
  -webkit-transform: translateZ(0) translateX(100%);
  transform: translateZ(0) translateX(100%);
}

.slidr.animating > *.horizontal.right {
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
}

.slidr.animating > *.vertical-next.left, .slidr.animating > *.vertical-next.right {
  -webkit-transform: translateZ(0) translateY(0);
  transform: translateZ(0) translateY(0);
}

.slidr.animating > *.vertical.left {
  -webkit-transform: translateZ(0) translateY(100%);
  transform: translateZ(0) translateY(100%);
}

.slidr.animating > *.vertical.right {
  -webkit-transform: translateZ(0) translateY(-100%);
  transform: translateZ(0) translateY(-100%);
}

.slidr > * {
  display: inline-block;
  padding: 0;
  margin: 0;
  z-index: 1;
  opacity: 0;
}

.slidr > * img {
  display: block;
  width: 100%;
}

.init .slidr > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.slidr > *.active {
  z-index: 100;
  opacity: 1;
}

.slidr > *.fade {
  opacity: 0;
  z-index: 101;
}

.slidr > *.scale {
  opacity: 1;
  z-index: 101;
  border-radius: 100%;
  overflow: hidden;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.slidr > *.wipe {
  opacity: 1;
  z-index: 101;
}

.slidr > *.wipe.right {
  -webkit-transform: translateZ(0) translateX(100%);
  transform: translateZ(0) translateX(100%);
}

.slidr > *.wipe.left {
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
}

.slidr > *.behind {
  opacity: 1;
  z-index: 99;
}

.slidr > *.wipe-out { opacity: 1; }

.slidr > *.wipe-out.right {
  -webkit-transform: translateZ(0) translateX(0);
  transform: translateZ(0) translateX(0);
}

.slidr > *.wipe-out.left {
  -webkit-transform: translateZ(0) translateX(0);
  transform: translateZ(0) translateX(0);
}

.slidr > *.horizontal {
  opacity: 1;
  z-index: 101;
  -webkit-transform: translateZ(0) translateY(0);
  transform: translateZ(0) translateY(0);
}

.slidr > *.vertical-next {
  opacity: 1;
  z-index: 101;
}

.slidr > *.vertical-next.right {
  -webkit-transform: translateZ(0) translateY(100%);
  transform: translateZ(0) translateY(100%);
}

.slidr > *.vertical-next.left {
  -webkit-transform: translateZ(0) translateY(-100%);
  transform: translateZ(0) translateY(-100%);
}

.slidr > *.vertical {
  opacity: 1;
  z-index: 101;
  -webkit-transform: translateZ(0) translateY(0);
  transform: translateZ(0) translateY(0);
}

.slidr-pagination {
  position: relative;
  padding: 0;
  margin: 0 0 20px 0;
  list-style: none;
  font-size: 0;
  text-align: center;
  z-index: 102;
}

.slidr-pagination.over {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 20px 0;
  left: 0;
  right: 0;
}

.slidr-pagination.over li { background: white; }

.slidr-pagination.over li.active { background: black; }

.slidr-pagination.hide:hover li {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}

.slidr-pagination.hide li {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s 0.3s, opacity 0.3s ease;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.slidr-pagination li {
  font-size: 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 4px;
  background: #ccc;
  border-radius: 100%;
  cursor: pointer;
  text-indent: -9999px;
}

.slidr-pagination li.active { background: black; }

.slidr-navigation {
  padding: 0;
  margin: 0;
  list-style: none;
}

.slidr-navigation li {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  cursor: pointer;
  z-index: 102;
  text-indent: -9999px;
}

.slidr-navigation li:after {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-width: 3px 3px 0 0;
  color: white;
}

.slidr-navigation li.slidr-prev { left: 0; }

.slidr-navigation li.slidr-prev:after {
  left: 30px;
  -webkit-transform: translateY(-50%) rotate(225deg);
  -ms-transform: translateY(-50%) rotate(225deg);
  transform: translateY(-50%) rotate(225deg);
}

.slidr-navigation li.slidr-next { right: 0; }

.slidr-navigation li.slidr-next:after {
  right: 30px;
  -webkit-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

.slidr-navigation li.hide:hover:after {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}

.slidr-navigation li.hide:after {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s 0.3s, opacity 0.3s ease;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.slidr + .slidr-pagination { margin: 20px 0 0 0; }

4. Plugin's default options.

// 'fade', 'wipe', 'wipe-out'
// 'scale', 'horizontal', 'vertical'
mode: "fade",

// animation speed
speed: 500,

// aniamtion duration
slideDuration: 0,

// easing effect
easing: 'ease',

// initial slide
start: 1,

// pause on hover
pauseOnHover: true,

// pagination options
pagination: {
  active: true,
  location: 'bottom',
  showOnHover: false
},

// navigation options
navigation: {
  active: true,
  showOnHover: false
},

// enable touch events
touchEnabled: true,

// swipe threshold on touch devices
swipeThreshold: 50,

// enable responsive layout
responsive: true

---

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