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

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.