Multiple sliders problems

Question

I have some problem in my program two slides are working automatically but I want two slides have two move same and also i don't want any delay beteween two slides Please help me Thanks for help

var mySwiper = new Swiper('#first-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,

var mySwiper1 = new Swiper('#second-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,
    });

in this two sliders;

when it is moving i have some delay between thease two sliders

delay means first of all first slider is moving after that second slider is moving I don't want that

I want two slides have two move same path without any delay

Please, improve your question http://stackoverflow.com/help/how-to-ask — Milan Baran, May 18 '15 at 07:15
That's alright, just hit edit and put as much information as you can. Follow the link i provided. Look you didn't even provide the code you have problem with. What answer do you expected? Code example, don't you? — Milan Baran, May 18 '15 at 07:22
So dude, what about my Solution, does it work, is it OK or is the Bug still appearing? Please Accept if its working. — Anders Anderson, May 19 '15 at 07:51

Anders Anderson · Accepted Answer · 2015-05-19T14:52:26.313

So as a workaround, don't set both sliders on a timed interval.

Only set the first slider to autoplay. Then in the onSlideChangeStart, trigger the second one to slide, like thins:

var mySwiper = new Swiper('#first-slider',{ loop:true, grabCursor:true,  
autoplay: 2500, simulateTouch: false, transitionSpeed: 1000, 
onSlideChangeStart: function(swiper, direction) {
     mySwiper1.slideNext();
} });

var mySwiper1 = new Swiper('#second-slider',{ loop:true, grabCursor: 
true, simulateTouch: false, transitionSpeed: 1000});

This way your swiper will just do its thing, but the second one depending on the first, so they will ALWAYS move together...

Use this snippet to try, and accept answer if it is what you wanted :)

var mySwiper = new Swiper('#first-slider',{ loop:true, grabCursor:true,  
autoplay: 2500, simulateTouch: false, transitionSpeed: 1000, 
// Navigation arrows
onSlideChangeStart: function(swiper, direction) {
    if (typeof mySwiper1 != "undefined"){
        mySwiper1.slideNext();
    }else{
        alert("PageLoad");
    }
} 
 });
var mySwiper1 = new Swiper('#second-slider',{ loop:true, grabCursor: 
true, simulateTouch: false, transitionSpeed: 1000});

.swiper-container {
    width: 100px;
    height: 100px;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/css/swiper.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container" id='first-slider'>
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper" >
        <!-- Slides -->
        <div class="swiper-slide" style="background-color:red">Slide 1</div>
        <div class="swiper-slide" style="background-color:green">Slide 2</div>
        <div class="swiper-slide" style="background-color:yellow">Slide 3</div>        
    </div>
    
</div>  
 <!-- Slider main container -->
<div class="swiper-container" id='second-slider'>
    <div class="swiper-wrapper" >
        <!-- Slides -->
        <div class="swiper-slide" style="background-color:green">Slide 1</div>
        <div class="swiper-slide" style="background-color:yellow">Slide 2</div>
        <div class="swiper-slide" style="background-color:blue">Slide 3</div>        
    </div>
</div>

Also, for you to play around with: http://jsfiddle.net/yuayL7zq/2/

Here is a fiddle i made, to try my ideas.

score 0 · Answer 2 · edited May 18 '15 at 17:35

The problem is that I had two sliders with sliding time interval 2500. In this case, two sliders are working fine without any delay during fist time. After that if I open two or more new tabs in my browsers, and then go to my webpage. Now there is a delay between two sliders.

Below is the code I had used for slide function,

var mySwiper = new Swiper('#first-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,
        onSlideChangeStart: function(swiper, direction) {// my task will go here...}
    });

var mySwiper1 = new Swiper('#second-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,
    });

I can sure that whenever I reload the page two sliders are working fine with same time interval. I had this problem whenever I moved to new tab and come back to my webpage.Is there any mistake in the two sliders that cause delay between sliders? -Thanks for help

This doesn't seem to be an answer, but more like additional information about your question. — JasonMArcher, May 18 '15 at 23:43

Multiple sliders problems

2 Answers2