Basic jQuery Any Content Slideshow Plugin - Carousel 2.0

Carousel 2.0 is a super tiny and easy jQuery slideshow plugin which enables you to horizontally or vertically slide through a group of Html contents.

How to use it:

1. Include the latest jQuery javascript library and the jQuery carousel 2.0 plugin at the end of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='js/script.js'></script>

2. Create a container element and wrap the images (or any other Html elements) into it.

<div id="sliders">
<div class="slide"> <img src="images/1.jpg"/> </div>
<div class="slide"> <img src="images/2.jpg"/> </div>
<div class="slide"> <img src="images/3.jpg"/> </div>
...
</div>

3. Make sure the container element has fixed height and width.

#sliders{ 
width:1024px; 
height:365px;
}

4. Call the plugin on the container and set the options for your slideshow.

$("#sliders").Slider({ 
styleNav : true,
navColor : "#555555",
speed: 500, // transition speed
direction: "up", // left or up
});

Change log:

2014-08-18

• update.

---

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