How to add a class to the current slide in jQuery Cycle

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.

Comments

  1. written by: klebism on May 19, 2011 at 8:19 pm - Reply

    very helpful. thnx.

    • written by: mihai on June 7, 2011 at 10:03 am - Reply

      i’m sorry for the late response, and i’m glad it helped.

  2. written by: andy on June 23, 2011 at 5:51 pm - Reply

    also here to say BIG UPS MATE. worked a charm. so easy i literally muttered “oh shit” when it worked straight away.

  3. written by: impressed on October 18, 2011 at 5:34 pm - Reply

    Thank you! Thank you!

    This is awesome and works beautifully!

  4. written by: Romul on March 19, 2012 at 11:40 pm - Reply

    It helped my today. Thanks!

    • written by: mihai on March 20, 2012 at 12:23 am - Reply

      you’re welcome.

  5. written by: Manoj Kumar on October 26, 2013 at 11:43 am - Reply

    Its very very helpful. lot of thnks for u ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 44 = 53

This site uses Akismet to reduce spam. Learn how your comment data is processed.