jQuery slider widget background -- change dynamicaly

Question

I use a custom background for my slider by overriding the CSS:

.ui-widget-content {background: transparent url(../img/bg.png) no-repeat;}

Slider's behavior is controlled by:

$(document).ready(function() {
    $(".myslider5").slider({
        animate: "true",
        step: 1,
        min: -1950,
        max: 1950,
        value: 0,
        slide: function(event, ui) {
               // magic happens here
        }
    });
    $(".myslider3").slider({
        animate: "true",
        step: 1,
        min: -1350,
        max: 1350,
        value: 0,
        slide: function(event, ui) {
               // magic happens here
        }
    });

So, myslider5 and myslider3 are the two classes. But their background images need to be different. How do I go about doing this?

Answer 1

UPDATED:

DEMO http://jsbin.com/itivu3

SOURCE http://jsbin.com/itivu3/edit

NOTE: taking in mind what you have asked, change image dinamically on slide!!!

Answer 2

I figured it out. For some reason, aSeptik's suggestion was not working. It had to be tweaked in the CSS section and not in the JS.

.myslider5.ui-widget-content {background: transparent url(../img/slider5.png);}
.myslider3.ui-widget-content {background: transparent url(../img/slider3.png);}