Two related Swiper slider horizontal+vertical

Question

I have a some slider in stackblitz

So, I have two related slider horizontal and vertical:

...

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import SwiperCore, { Scrollbar, Pagination, Navigation, Thumbs } from 'swiper';
...
  // Swiper
  SwiperCore.use([Pagination]);
...
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
 ...
      <Swiper
        scrollbar={{
          hide: true,
        }}
        modules={[Scrollbar, Pagination, Navigation, Thumbs]}
        onSwiper={setThumbsSwiper}
        mousewheel={true}
        slidesPerView={4}
        className="swiper-top"
      >
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            <div className="d-flex flex-column items-center">
              <span className="d-block bg-light rounded-full w-5 h-5 mx-auto "></span>
              <small className="d-block mb-0 mt-1">{item.title}</small>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* // mousewheel={true} direction={'vertical'} */}
      <Swiper
        modules={[Pagination, Navigation, Thumbs]}
        slidesPerView={1}
        autoHeight={true}
        updateOnWindowResize={true}
        mousewheel={true}
        direction={'vertical'}
        thumbs={{
          swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
        }}
        className="swiper-main"
        onSwiper={(swiper) => {
          console.log(swiper);
        }}
        onSlideChange={() => console.log('slide change')}
      >
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            <Step item={item} />
          </SwiperSlide>
        ))}
      </Swiper>

Question: How can I connect these 2 sliders so that by clicking on the horizontal item, not the entire vertical one scrolls, but only one slide? Vertical can be of different heights. And If I click to vertical scroll to horizontal item?

Answer 1

You can use slideTo method provided by Swiper. Updated code will look like this :

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import SwiperCore, { Scrollbar, Pagination, Navigation, Thumbs } from 'swiper';

SwiperCore.use([Pagination, Navigation, Thumbs]);

const App = () => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const [mainSwiper, setMainSwiper] = useState(null);

  const handleHorizontalItemClick = (index) => {
    if (mainSwiper && mainSwiper.slideTo) {
      mainSwiper.slideTo(index);
    }
  };

  const handleVerticalItemClick = (index) => {
    if (thumbsSwiper && thumbsSwiper.slideTo) {
      thumbsSwiper.slideTo(index);
    }
  };

  return (
    <>
      <Swiper
        scrollbar={{
          hide: true,
        }}
        modules={[Scrollbar, Pagination, Navigation, Thumbs]}
        onSwiper={setThumbsSwiper}
        mousewheel={true}
        slidesPerView={4}
        className="swiper-top"
      >
        {list.map((item, index) => (
          <SwiperSlide key={item.id} onClick={() => handleHorizontalItemClick(index)}>
            <div className="d-flex flex-column items-center">
              <span className="d-block bg-light rounded-full w-5 h-5 mx-auto "></span>
              <small className="d-block mb-0 mt-1">{item.title}</small>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      <Swiper
        modules={[Pagination, Navigation, Thumbs]}
        slidesPerView={1}
        autoHeight={true}
        updateOnWindowResize={true}
        mousewheel={true}
        direction={'vertical'}
        thumbs={{
          swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
        }}
        className="swiper-main"
        onSwiper={setMainSwiper}
        onSlideChange={() => console.log('slide change')}
      >
        {list.map((item, index) => (
          <SwiperSlide key={item.id} onClick={() => handleVerticalItemClick(index)}>
            <Step item={item} />
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  );
};

export default App;