I have 2 instances of Slider.js on a product page:

var swiperProdImage = new Swiper('.swiper-productimage', { }

var swiperThumbs = new Swiper('.swiper-productthumbs', { }

I want first to control second on next/prev swipes but can't get slideNext() to work?

Where am I going wrong here?

swiperProdImage.on('slideNextTransitionStart', function() {

   swiperThumbs.slideNext();
   swiperThumbs.update(true);

});

swiperProdImage.on('slidePrevTransitionStart', function() { 

   swiperThumbs.slidePrev();
   swiperThumbs.update(true);

});

I have 2 instances of Slider.js on a product page:

var swiperProdImage = new Swiper('.swiper-productimage', { }

var swiperThumbs = new Swiper('.swiper-productthumbs', { }

I want first to control second on next/prev swipes but can't get slideNext() to work?

Where am I going wrong here?

swiperProdImage.on('slideNextTransitionStart', function() {

   swiperThumbs.slideNext();
   swiperThumbs.update(true);

});

swiperProdImage.on('slidePrevTransitionStart', function() { 

   swiperThumbs.slidePrev();
   swiperThumbs.update(true);

});

• javascript
• jquery
• function
• slider
• swiper.js

2 Answers 2

You can use this to sync your sliders (to do right after initialisation of your sliders) :

// Assign each other controls
swiperProdImage.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperProdImage;

One of the approach using controller https://swiperjs./react#controller:

"use client";
import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import {
  Controller,
  EffectFade,
  Autoplay,
  EffectCoverflow,
} from "swiper/modules";

const SwiperComponent = () => {
  const titles = [
    " ",
    "Title1",
    "Title2",
    "Title3",
    "Title4",
    "Title5",
    "Title6",
  ];
  const images = ["Img1", "Img2", "Img3", "Img4", "Img5", "Img6"];
  const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);
  return (
    <div className="lg:max-w-8/10 w-3/4 mx-auto">
      <Swiper
        modules={[Controller, Autoplay, EffectCoverflow]}
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper }}
        slidesPerView={3}
        // slidesPerGroup={1}
        autoplay={{
          delay: 1000,
          disableOnInteraction: true,
        }}
        effect="coverflow"
        className="flex flex-col items-center"
      >
        <div className="swipe-titles">
          {titles.map((title, index) => (
            <SwiperSlide key={index} className="text-3xl text-center">
              {title}
            </SwiperSlide>
          ))}
        </div>
      </Swiper>
      <Swiper
        modules={[Controller, EffectFade]}
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper }}
        className="flex flex-col items-center"
      >
        <div className="swipe-imgs">
          {images.map((image, index) => (
            <SwiperSlide key={index} className="w-8/10">
              {image}
            </SwiperSlide>
          ))}
        </div>
      </Swiper>
    </div>
  );
};

export default SwiperComponent;