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

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.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<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.

<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.

<div class="slider-wrapper">

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

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

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

</div>

4. The basic CSS styles for the content carousel.

.slider-wrapper {
  height: 380px;
  position: relative;
}

.slider-content { height: 380px; }

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

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

.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; }

6. Initialize the content slider with options.

$(function(){
    
  $(".slider-wrapper").infiniteSlider({

  animateType   : false,

  // autoplay interval
  // default: false
  autoPlaySpeed : 2000,

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

  // stop auto-scrolling on mouse hover
  // default: false
  hoverPause    : true,

  // display navigation
  // default: false
  navigation    : true,

  // responsive layout
  responsive    : false,

  // animation speed
  speed         : "normal",

  // enable touch events
  // default: false
  swipe         : true,

  swipeLimit    : false,

  // width of the content slider
  // default: "100%"
  width         : "100%"
  
  });

});

Change log:

2015-08-13

• Update infinite-slider.js

---

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