Cycle Slider Change the slider / or body class based on slide number

SlideBGChangeScript.js

jQuery(function($){


    // Slider
    $('.slider').cycle({
        timeout: 8000,
        pause  : true,
        prev   : '#prev',
        next   : '#next',
        after: slideBgChange
    });

function slideBgChange(curr,next,opts) {
    var slidenum = (opts.currSlide + 1); //+ '/' + opts.slideCount;
    $('#slideWrapper').attr('class', 'sliderBg' + slidenum);
}



});

SlideBgChangeStyles.css

/* Slider */
#slideWrapper {
    width: 100%;
    min-width: 1000px !important;
    margin-bottom: 50px;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;

    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
}
#slideWrapper.sliderBg1 {
    background: url(/Portals/242500/images/layout/sliderbg.png) no-repeat center center;
}
#slideWrapper.sliderBg2 {
    background: url(/Portals/242500/images/layout/sliderbg1.png) no-repeat center center;
}
#slideWrapper.sliderBg3 {
    background: url(/Portals/242500/images/layout/sliderbg2.png) no-repeat center center;
}
#slideWrapper .slider {
    width: 1000px;
    margin: auto;
    height: 401px;
    overflow: hidden;
}