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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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>
...
</ul>
</div>
</div>

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:

<script>
$(function() {
$("#mySlider1").AnimatedSlider({ 
prevButton: "#btn_prev", 
nextButton: "#btn_next"
});
});
</script>

6. Available options.

<script>
$(function() {
$("#mySlider1").AnimatedSlider({ 
infiniteScroll: true,
visibleItems: 3,
changedCallback: null,
willChangeCallback: null,
userChangedCallback: null,
useTransitions: true
});
});
</script>

Change log:

2014-02-21

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