Super Simple jQuery Slideshow with Smooth Transitions - Blinds

Blinds is a simple and fast jQuery plugin for quickly creating a image slideshow with smooth transitions and number navigation.

Features:

• Cross-browser (IE6+, Safari, Chrome, Firefox, etc.)
• Multiple slideshows on one page
• Customizable through CSS and javascript
• Supports CSS Sprites

How to use it:

1. Include jQuery library and jQuery Blinds

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.blinds-0.9.js"></script>

2. Create the slideshow

<div class="slideshow">
<ul>
<li><img src="lemons/1.jpg" alt="lemon" /></li>
<li><img src="lemons/2.jpg" alt="lemon tea" /></li>
<li><img src="lemons/3.jpg" alt="splashing lemon" /></li>
<li><img src="lemons/4.jpg" alt="salad with lemon" /></li>
<li><img src="lemons/5.jpg" alt="lemonade!" /></li>
<li><img src="lemons/6.jpg" alt="sliced lemon" /></li>
<li><img src="lemons/7.jpg" alt="dripping lemon" /></li>
</ul>
</div>

3. Create a group of links to change image links using CSS3 Sprites

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)">1</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1)">2</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2)">3</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3)">4</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4)">5</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5)">6</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(6)">7</a>

4. The CSS

.change_link {
	display: block;
	width: 20px;
	height: 20px;
	font-size: 12pt;
	background-color: #eee;
	float: left;
	margin-right: 5px;
	text-align: center;
	margin-top: 10px;
	border: 1px solid #bbb;
	text-decoration: none;
}

5. Call the plugin

<script type="text/javascript">
$(window).load(function () {
$('.slideshow').blinds();
})
</script> 

---

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