Simple Seamless Carousel / Scroller Plugin with jQuery - cxScroll

cxScroll is a simple, lightweight jQuery carousel / scroller plugin which allows to scroll infinitely & automatically through a list of html content in both directions.

How to use it:

1. Import jQuery JavaScript library and the jQuery cxScroll plugin into your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.cxscroll.min.js"></script>

2. Import the OPTIONAL jQuery easing plugin for additional easing methods.

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

3. Add your html content into the carousel / scroller.

<div id="demo" class="scroll_horizontal">
  <div class="box">
    <ul class="list">
      <li><a href="#"><img src="1.jpg"></a></li>
      <li><a href="#"><img src="2.jpg"></a></li>
      <li><a href="#"><img src="3.jpg"></a></li>
      <li><a href="#"><img src="4.jpg"></a></li>
      <li><a href="#"><img src="5.jpg"></a></li>
    </ul>
  </div>
</div>

4. The custom CSS to style the carousel / scroller.

.scroll_horizontal {
  position: relative;
  width: 660px;
  height: 120px;
  padding: 10px;
  background-color: #eee;
}

.scroll_horizontal .box {
  overflow: hidden;
  position: relative;
  width: 580px;
  height: 120px;
  margin: 0 auto;
}

.scroll_horizontal .list {
  overflow: hidden;
  width: 9999px;
}

.scroll_horizontal .list li {
  float: left;
  width: 200px;
}

.scroll_horizontal .prev, .scroll_horizontal .next {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  width: 40px;
  height: 50px;
  background-image: url(img/control.png);
  background-repeat: no-repeat;
  font: 0/0 Arial;
  cursor: pointer;
}

.scroll_horizontal .prev {
  left: 5px;
  background-position: 0 0;
}

.scroll_horizontal .next {
  right: 5px;
  background-position: -40px 0;
}

.scroll_horizontal .prev:hover { background-position: 0 -50px; }

.scroll_horizontal .next:hover { background-position: -40px -50px; }

5. Initialize the plugin with default options.

$("#demo").cxScroll();

6. Options and defaults.

// top, right, bottom, left
direction:"right",

// easing effect
easing:"swing", 

// how many items on one slide
step:1, 

// animation speed on manual mode
accel:160,

// animation speed on auto mode
speed:800,

// transition delay
time:4000, 

// auto play
auto:true,

// pause on hover
hoverLock: true

// enable prev/next buttons
prevBtn:true,
nextBtn:true 

Change log:

v1.2.2 (2015-09-17)

• update

---

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