Download Minimal Touch-Enable jQuery Image Carousel Plugin – Reverse Slider

This time I will share jQuery Plugin and tutorial about Minimal Touch-Enable jQuery Image Carousel Plugin – Reverse Slider, hope it will help you in programming stack.

File Size:	520 KB
Views Total:	2657
Last Update:	6 years ago
Publish Date:	6 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

`1`	`<script` `src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>`

`2`	`<script` `src="js/slider-reverse-min.js"></script>`

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

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

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

1
<div class="slider-wrapper">

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

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

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

5
</div>

4. The core CSS styles for the image carousel.

01
.slider-wrapper {

02
  height: 380px;

03
  margin: 200px auto 0px;

04
  position: relative;

05
}

06
 
07
.slider-content { height: 380px; }

08
 
09
.slider-box {

10
  background-repeat: no-repeat;

11
  float: left;

12
  height: 380px;

13
}

14
 
15
.slider-btns {

16
  background-image: url('../images/arrows.png');

17
  background-repeat: no-repeat;

18
  cursor: pointer;

19
  display: block;

20
  height: 50px;

21
  margin-top: -25px;

22
  position: absolute;

23
  top: 50%;

24
  width: 50px;

25
  -webkit-user-select: none;  /* Chrome all / Safari all */

26
  -moz-user-select: none;     /* Firefox all */

27
  -ms-user-select: none;      /* IE 10+ */

28
  -o-user-select: none;

29
  user-select: none;

30
}

31
 
32
.slider-prev {

33
  background-position: 0px -50px;

34
  left: -25px;

35
}

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

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

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

42
 
43
.slider-nav {

44
  bottom: 5px;

45
  height: 18px;

46
  left: 0px;

47
  position: absolute;

48
  text-align: center;

49
  width: 100%;

50
}

51
 
52
.slider-nav li.slider-nav-items {

53
  background-color: #FFFFFF;

54
  border: 4px solid #FFFFFF;

55
  border-radius: 100%;

56
  cursor: pointer;

57
  display: inline-block;

58
  height: 10px;

59
  margin: 0px 5px;

60
  text-indent: -99999px;

61
  width: 10px;

62
}

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

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

67
 
68
.slider-play-toggle {

69
  background-image: url('../images/auto-play-toggle.png');

70
  background-position: 0px -20px;

71
  background-repeat: no-repeat;

72
  bottom: 5px;

73
  cursor: pointer;

74
  display: block;

75
  height: 20px;

76
  position: absolute;

77
  right: 5px;

78
  width: 20px;

79
  z-index: 1;

80
}

81
 
82
.slider-play-toggle.stop,

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

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

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

02
 
03
animateType   : false,

04
 
05
// auto-rotation speed

06
Share this:Facebook
Tweet
WhatsApp
Related posts:Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js
Free Download Smooth Sticky Header In jQuery – sp.stickyHeader.js
Free Download Powerful Calendar Plugin With jQuery – Calendar.js