Simple Seamless Carousel / Scroller Plugin with jQuery - cxScroll

File Size: 91.2 KB
Views Total: 3699
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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.


6. Options and defaults.

// top, right, bottom, left

// easing effect

// how many items on one slide

// animation speed on manual mode

// animation speed on auto mode

// transition delay

// auto play

// pause on hover
hoverLock: true

// enable prev/next buttons

Change log:

v1.2.2 (2015-09-17)

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