#reactjs #swiper #swiperjs
Вопрос:
Я нахожусь в другой ситуации. Я использую Swiper.js для моего приложения React. Мне нужно изменить цвет темы приложения при изменении слайда, и он должен быть динамичным. Это мне нужно передать несколько реквизитов SwiperSlide и получить этот реквизит при смене слайдов. Как я могу с этим справиться ?
lt;Swiper id="pathway-slider" slidesPerView={1} onSlideChange={(swiper) =gt; { console.log("Slide index changed to: ", swiper); }} gt; lt;SwiperSlidegt; Slide 1 lt;/SwiperSlidegt; lt;SwiperSlidegt; Slide 2 lt;/SwiperSlidegt; lt;/Swipergt;
Когда я консолю.log(swiper), Он дает мне огромный объект, где я могу получить доступ к activeSlideIndex или т. Д. Но как я могу передать туда пользовательские данные ?
Ответ №1:
Нашел способ с помощью пользовательского компонента слайдов:
/** * props contains: isActive, isDuplicate, isnNext, isPrev, isVisible */ const SlideContent = ({...props}) =gt; { return ( lt;gt; {props.isActive amp;amp; 'isActive'} lt;/gt; ) } lt;Swipergt; lt;SwiperSlidegt; {SlideContent} lt;/SwiperSlidegt; lt;/Swipergt;
Пытался сделать это напрямую с lt;SwiperSlidegt;
помощью , но это, похоже, нарушает функциональность.