Add current slide body class on slide change_问答_开发者

Add current slide body class on slide change

开发者 https://www.devze.com 2023-04-06 23:46 出处：网络

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 sli

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

Just add the initial class to body directly (<body class="slide-1">). No need to let JavaScript do this since it will always start at slide 1.

To increment that number you can set the currentClass option so that we can get the index of the current slide with .index().

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