I think that every web developer heard about jQuery Cycle plugin, and we all know that is the most simple to use, and the best regarding the options that it has, but that doesn’t mean is bullet proof. In some weird coincidence, I needed a css selector on the current slide ( something like class=”current” ), after I clicked “Inspect element”, I was surprised to find out that Cycle doesn’t have any kind of css selector on the slides ( what looney would need it ) ; so I start searching for a solution,  and that’s how we end up to the snippet of code bellow.

Here is the markup,

<ul id="slideshow">
      <li>
           <img src="path-to-slide1.jpg" width="400" height="300" alt="" />
      </li>
      <li>
           <img src="path-to-slide2.jpg" width="400" height="300" alt="" />
      </li>
     ... etc
 </ul>

and the js,

$('#slideshow').cycle({
     fx: 'fade',
     speed: 'slow',
     timeout: 3000,
     before: function(){
           $(this).parent().find('li.current').removeClass();
     },
      after: function(){
           $(this).addClass('current');
     }
});

I still don’t think this is the best approach to this problem, but it works, and if you know a better way, please leave a comment.

Here you will find a demo, to see it in action.