Question

I’m using slidesjs to create a slideshow on my site, this is working fine but I want to add a incremented class to the body tag e.g. slide-1 at load and then when the slide changes slide-2 etc until the slide fully rotates and it goes back to slide-1

My current code is;

<script>
$(function(){
    $('#feature-slideshow').slides({
        preload: true,
        preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
        generateNextPrev: false,
        effect: 'fade',
        play: 5000,
        hoverPause: true,
        animationStart: function() {
            $("body").addClass("slide");
    }
    });
});
</script>

I have two problems;

1) the I want the initial class set before the slideshow has loaded so that the style which is a background is applied when the page is loaded rather than the slideshow

2) How to increment the slide-x class when the slideshow is transitioned/changed.

Any help would be greatly appreciated

Answer 1

Ok managed to get this to work, thanks to Marcus for his help, I just tweaked your code to pickup the correct list ‘pagination’ which had the current class applied;

$(function(){
var slideshow = $("#feature-slideshow");
    slideshow.slides({
        preload: true,
        preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
        generateNextPrev: false,
        effect: 'fade',
        play: 5000,
        hoverPause: false,
        currentClass: "current",
        animationStart: function() {
            var idx = $('ul.pagination').children(".current").index();
            document.body.className = "slidebg-"+(idx+1);
        }
    });
});

I had to apply slidebg-3 to the body tag as for some reason when the slideshow cycles it includes the first list

Works great though apart from removing all other body classes, I suppose I could add it as an ID as I’m not using one of those

Anyway hope this helps someone else!