ali hafezi
3 سال پیش توسط ali hafezi مطرح شد
0 پاسخ

اشکال در زمانبندی و ناهماهنگ بودن دو تا اسلایدر در swiper با react

import { useRef, useState } from "react";
// images
import {
  HomeIntroSliderImage,
  HomeIntroSliderButton,
} from "./HomeIntroSliderImages";
// swiper library
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/bundle";
import "swiper/css/autoplay";

// import moduls required
import { FreeMode, Navigation, Thumbs, Autoplay, Pagination } from "swiper";
// style
import "./HomeIntroSlider.css";
function HomeIntroSlider() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  return (
    <>
      <Swiper
        className="HomeIntroSlider_mySwiper1"
        slideToClickedSlide={true}
        centeredSlides={true}
        loop={false}
        speed={500}
        autoplay={{
          disableOnInteraction: false,
          pauseOnMouseEnter: false,
          delay: 3500,
        }}
        spaceBetween={10}
        navigation={true}
        pagination={true}
        thumbs={{ swiper: thumbsSwiper }}
        modules={[FreeMode, Navigation, Thumbs, Autoplay]}
      >
        {HomeIntroSliderImage.length &&
          HomeIntroSliderImage.map((img, index) => (
            <SwiperSlide key={index}>
              <img src={img} alt="Image Slider" />
            </SwiperSlide>
          ))}
      </Swiper>
      <Swiper
        loop={false}
        className="HomeIntroSlider_mySwiper11"
        onSwiper={setThumbsSwiper}
        slideToClickedSlide={true}
        centeredSlides={true}
        spaceBetween={10}
        speed={500}
        autoplay={{
          delay: 3500,
          disableOnInteraction: false,
          pauseOnMouseEnter: false,
        }}
        breakpoints={{
          961: {
            slidesPerView: 4,
          },
          576: {
            slidesPerView: 3,
          },
        }}
        modules={[FreeMode, Thumbs, Autoplay]}
      >
        {HomeIntroSliderButton.length &&
          HomeIntroSliderButton.map((btn, index) => (
            <SwiperSlide key={index} className="HomeIntroSlider_mySwiper11_btn">
              <button>{btn}</button>
            </SwiperSlide>
          ))}
      </Swiper>
    </>
  );
}

export default HomeIntroSlider;

ثبت پرسش جدید

به همدیگه کمک کنیم

به ali hafezi کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام