Responsive Infinite Looping Slider with jQuery - loopslider

loopslider is a jQuery plugin which makes it easy to create a responsive, infinite-looping content carousel slider on your website.

How to use it:

1. Load the jQuery library and the jQuery loopslider plugin in the web page.

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

2. Load the jQuery easing plugin if you wish to have easing effects support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Build the Html structure for the carousel slider and embed any Html elements into it as follows:

<div id="slider">
  <div id="sl-view" class="clearfix">
    <div id="sl-wrap">
      <div class="sl-div"><img src="1.jpg"></div>
      <div class="sl-div"><img src="2.jpg"></div>
      <div class="sl-div"><img src="3.jpg"></div>
    </div>
  </div>
  <div id="sl-next"><span>&raquo;</span></div>
  <div id="sl-prev"><span>&laquo;</span></div>
</div>

4. The basic CSS for slider styles.

body { overflow-x: hidden }

/* slider settings */


#slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #999;
  padding: 20px 0px;
}

#sl-view {
  clear: both;
  position: relative;
  margin: 0 auto;
}

#sl-wrap {
  clear: both;
  position: absolute;
  margin: 0 auto;
}

.sl-div {
  background-color: rgba(0,0,0,0.2);
  float: left;
  color: #fff;
  font-size: 30px;
}

#sl-next,
#sl-prev {
  position: absolute;
  width: 100px;
  text-align: center;
  font-size: 50px;
  height: 100%;
  top: 0px;
  cursor: pointer;
}

#sl-next>span,
#sl-prev>span {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  margin: 0 auto;
  margin-top: -25px !important;
  color: #fff;
}

#sl-next:hover,
#sl-prev:hover { background-color: rgba(255,255,255,0.3) }

#sl-next {
  right: 0px;
  z-index: 5000;
}

#sl-prev {
  left: 0px;
  z-index: 5000;
}

#sl-nav {
  position: absolute;
  z-index: 5000;
}

#sl-nav>p {
  font-size: 20px;
  float: left;
  margin: 0 10px;
  color: #aaa;
  cursor: pointer;
}

#sl-nav>p:hover {
  color: #eee;
  text-shadow: 0px 1px 0px #333;
}

#sl-nav>p.hit { color: #0080FF; }

#sl-nav>p.hit:hover { color: #eee; }

5. Initialize the plugin and override the default options to customize your carousel slider.

$('#slider').loopSlider({

  // auto play
  autoMove : true,

  // pause on hover
  mouseOnStop : true,
  turn : 3000,

  // easing options
  motion : 'swing',

  // animation delay
  delay: 500,

  // image size
  width : 750,
  height : 250,

  marginLR : 10,

  // container size
  viewSize : 900,
  viewOverflow : 'visible',

  // navigation's bottom offset
  navPositionBottom : 30,

  // disable navigation buttons
  navibotton : true,

  // navigation images
  navbtnImage : '●'

});

---

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