Download Simple Cross-device Carousel Slider Plugin with jQuery – Infinite Slider

This time I will share jQuery Plugin and tutorial about Simple Cross-device Carousel Slider Plugin with jQuery – Infinite Slider, hope it will help you in programming stack.

Simple Cross device Carousel Slider Plugin with jQuery Infinite Slider - Download Simple Cross-device Carousel Slider Plugin with jQuery - Infinite Slider

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

Demo Download

Infinite Slider is a lightweight (~4kb minified) jQuery plugin to create a touch-enabled, infinite-looping and auto-scrolling content carousel on your web page/application.

How to use it:

1. Load jQuery library and the jQuery infinite slider plugin on the web page.

`1`	`<script` `src="//code.jquery.com/jquery-1.11.1.min.js"></script>`

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

2. Load the jQuery touchSwipe plugin to detect single and multiple finger swipes, pinches on the touch devices, with a fallback to mouse ‘drags’ on the desktop.

`1`	`<script` `src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>`

3. Create content slides and insert your images into the content carousel using CSS background-image property.

01
<div class="slider-wrapper">

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

04
    CONTENT 1 ...

05
  </div>

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

08
    CONTENT 2 ...

09
  </div>

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

12
    CONTENT 3 ...

13
  </div>

14
 
15
</div>

4. The basic CSS styles for the content carousel.

01
.slider-wrapper {

02
  height: 380px;

03
  position: relative;

04
}

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

07
 
08
.slider-box {

09
  background-repeat: no-repeat;

10
  float: left;

11
  height: 380px;

12
}

5. The required CSS to style & position the carousel controls.

01
.slider-btns {

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

03
  background-repeat: no-repeat;

04
  cursor: pointer;

05
  display: block;

06
  height: 50px;

07
  margin-top: -25px;

08
  position: absolute;

09
  top: 50%;

10
  width: 50px;

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

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

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

14
  -o-user-select: none;

15
  user-select: none;

16
}

17
 
18
.slider-prev {

19
  background-position: 0px -50px;

20
  left: -25px;

21
}

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

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

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

28
 
29
.slider-nav {

30
  bottom: 5px;

31
  height: 18px;

32
  left: 0px;

33
  position: absolute;

34
  text-align: center;

35
  width: 100%;

36
}

37
 
38
.slider-nav li.slider-nav-items {

39
  background-color: #FFFFFF;

40
  border: 4px solid #FFFFFF;

41
  border-radius: 100%;

42
  cursor: pointer;

43
  display: inline-block;

44
  height: 10px;

45
  margin: 0px 5px;

46
  text-indent: -99999px;

47
  width: 10px;

48
}

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

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

53
 
54
.slider-play-toggle {

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

56
  background-position: 0px -20px;

57
  background-repeat: no-repeat;

58
  bottom: 5px;

59
  cursor: pointer;

60
  display: block;

61
  height: 20px;

62
  position: absolute;

63
  right: 5px;

64
  width: 20px;

65
  z-index: 1;

66
}

67
 
68
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