Submit your widget

jQuery Blinds Slideshow using CSS Sprites

Created 13 years ago   Views 19014   downloads 2927    Author littlewebthings
jQuery Blinds Slideshow using CSS Sprites
View DemoDownload
Share |


  • Smooth animated transition
  • Customizable sprite grid
  • Customizable animation ochestration
  • Multiple instances on the same webpage
  • jQuery compatible (plugin)
  • Unobtrusive javascript


Works great on the following browsers:

  • Firefox 3.5
  • IE 8
  • IE 7
  • IE 6 (imagine my surprise!)
  • Opera 10
  • Chrome 4
  • Safari 4

<div class="slideshow">
      <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>

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

$(window).load(function () {