Simple Clean jQuery & CSS3 Carousel Slider Plugin - CSS Slider

File Size: 12.7 KB
Views Total: 14363
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Clean jQuery & CSS3 Carousel Slider Plugin - CSS Slider

CSS Slider is jQuery carousel/slider plugin which takes advantage of CSS3 transitions and transforms to animate the slides with next/prev controls and infinite looping support.

How to use it:

1. Include the required jQuery CSS Slider's stylesheet in the document's head section.

<link type="text/css" rel="stylesheet" href="css/animated-slider.css" />

2. Include the jQuery library and jquery.cssslider.js in the footer so the page load faster.

<script src=""></script>
<script type="text/javascript" src="js/jquery.cssslider.js"></script>

3. Create an image slider/carousel with html structure as shown below.

<div class="choose_slider">
<div class="choose_slider_items">
<ul id="demo">
<li class="current_item"> <a href="#"> <img src="images/1.png" /> </a> </li>
<li class="current_item"> <a href="#"> <img src="images/2.png" /> </a> </li>
<li class="current_item"> <a href="#"> <img src="images/3.png" /> </a> </li>

4. Create 2 buttons for prev/next controls.

<div><a id="btn_next" href="#">Next</a></div>
<div><a id="btn_prev" href="#">Previous</a></div>

5. To initiate the plugin simple call it like this:

$(function() {
prevButton: "#btn_prev", 
nextButton: "#btn_next"

6. Available options.

$(function() {
infiniteScroll: true,
visibleItems: 3,
changedCallback: null,
willChangeCallback: null,
userChangedCallback: null,
useTransitions: true

Change log:


  • Fixed issue with refresh causing prev/next buttons not to work.

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