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

Answer 1

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.