user2413939
user2413939

Reputation: 13

jQuery multi sliders change slide in one time

I'm using slidesjs and I want make multi sliders

I have 2 sliders #show and #show2, and I want that 2 slidersw work in 1 time: slides will be change in one time.

Now now 1 slider slides change earlier than 2, what is wrong in my code ?

I want that slides will change in one time:

<script>
        $(function(){
            $("#show").slidesjs({
                width: 900,
                height: 300,
                navigation: false,
                pagination: {active:   false},
                play: {
                    auto: true,
                    pauseOnHover: true,
                    effect: "fade",
                },
                effect: {
                    slide: {                                                     
                        speed: 200                                                 
                    },
                    fade: {
                        speed: 300,                                               
                        crossfade: true                                
                    }
                }
            });
            $("#show2").slidesjs({
                width: 900,
                height: 300,
                navigation: false,
                pagination: {active:   false},
                play: {
                    auto: true,
                    pauseOnHover: true,
                    effect: "fade",
                },
                effect: {
                    slide: {                                                     
                        speed: 200                                                 
                    },
                    fade: {
                        speed: 300,                                               
                        crossfade: true                                
                    }
                }
            });
        });
    </script>   

I try .ready but slides also change in different time

Upvotes: 0

Views: 287

Answers (1)

Rene Pot
Rene Pot

Reputation: 24815

Give them both a class, and target them at the same time.

<div class="sliders" id="show"></div>
<div class="sliders" id="show2"></div>

JS:

$(".sliders").slidesjs({ ... });

Upvotes: 1

Related Questions