Minimal Touch-Enable jQuery Image Carousel Plugin - Reverse Slider

Reverse Slider is a simple to use jQuery plugin for creating a responsive & auto-rotating image carousel that works on all major browsers and has touch swipe support.

How to use it:

1. Download, unzip and include the slider-reverse-min.js after loading jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/slider-reverse-min.js"></script>

2. Include the jQuery touchSwipe plugin for touch swipe support.

<script src="js/jquery.touchSwipe.min.js"></script>

3. Add your images as backgrounds into the carousel like so:

<div class="slider-wrapper">
  <div class="slider-box" style="background-image: url('1.jpg');"></div>
  <div class="slider-box" style="background-image: url('2.jpg');"></div>
  <div class="slider-box" style="background-image: url('3.jpg');"></div>
</div>

4. The core CSS styles for the image carousel.

.slider-wrapper {
  height: 380px;
  margin: 200px auto 0px;
  position: relative;
}

.slider-content { height: 380px; }

.slider-box {
  background-repeat: no-repeat;
  float: left;
  height: 380px;
}

.slider-btns {
  background-image: url('../images/arrows.png');
  background-repeat: no-repeat;
  cursor: pointer;
  display: block;
  height: 50px;
  margin-top: -25px;
  position: absolute;
  top: 50%;
  width: 50px;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;
}

.slider-prev {
  background-position: 0px -50px;
  left: -25px;
}

.slider-prev:hover { left: -28px; }

.slider-next { right: -25px; }

.slider-next:hover { right: -28px; }

.slider-nav {
  bottom: 5px;
  height: 18px;
  left: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
}

.slider-nav li.slider-nav-items {
  background-color: #FFFFFF;
  border: 4px solid #FFFFFF;
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  height: 10px;
  margin: 0px 5px;
  text-indent: -99999px;
  width: 10px;
}

.slider-nav li.slider-nav-items:hover { background-color: #444444; }

.slider-nav li.slider-nav-items.active { background-color: #00BAFF; }

.slider-play-toggle {
  background-image: url('../images/auto-play-toggle.png');
  background-position: 0px -20px;
  background-repeat: no-repeat;
  bottom: 5px;
  cursor: pointer;
  display: block;
  height: 20px;
  position: absolute;
  right: 5px;
  width: 20px;
  z-index: 1;
}

.slider-play-toggle.stop,
.slider-play-toggle.pause { background-position: 0px 0px; }

5. Call the plugin on the parent container to initialize the image carousel.

$(".slider-wrapper").sliderReverse({

animateType   : false,

// auto-rotation speed
autoPlaySpeed : 5000,

// custom button text
btnsText      : {
  next      : "",
  prev      : "",
  play      : "",
  pause     : ""
},

// pause on hover
hoverPause    : true,

// enable navigation
navigation    : true,

// animation speed
speed         : "normal",

// enable touch swipe
swipe         : true,

// swipe speed
swipeLimit    : 100,

// enable responsive layout
responsive    : false,

// width of the carousel
width         : "100%"

});

Change logs:

2015-08-13

• Update slider-reverse.js

---

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