问题标签 [swiperjs]

import React, { useContext } from "react"; import { useHistory } from "react-router-dom"; // Import Swiper React components import SwiperCore, { Navigation, Pagination, A11y } from "swiper"; import { Swiper, SwiperSlide } from "swiper/react"; import { Context } from "../Context"; // Import Swiper styles import "swiper/swiper.scss"; import "swiper/components/navigation/navigation.scss"; import "swiper/components/pagination/pagination.scss"; import "swiper/components/scrollbar/scrollbar.scss"; function Carousel() { let { quesNumber, setQuestNumber } = useContext(Context); let history = useHistory(); function nextQuestion() { setQuestNumber(quesNumber + 1); history.push(`/q-${quesNumber + 1}`); } SwiperCore.use([Navigation, Pagination, A11y]); return ( <Swiper loop={false} slidesPerView={"auto"} navigation spaceBetween={0} freeMode={true} pagination={{ clickable: false }} // onSwiper={() => (setQuestNumber(quesNumber ++))} onSlideChange={() => nextQuestion()} // onClick={() => console.log(nextQuestion())} > <SwiperSlide>slide 1</SwiperSlide> <SwiperSlide>slide 2</SwiperSlide> <SwiperSlide>slide 3</SwiperSlide> <SwiperSlide>slide 4</SwiperSlide> </Swiper> ); } export default Carousel;

谢谢 ：）