Maison > Questions et réponses > le corps du texte
Je dois supprimer la navigation par défaut (nextEl, prevEl) et faire défiler le bouton avec le texte "Next Slide Button" jusqu'à la diapositive suivante
<swiper class="news-slider" :sliderd-per-view="1" :modules="[Navigation, Pagination, A11y, Lazy]" navigation="navigation" :navigation="{ nextEl: '.nextArrow'}" :pagination="{ clickable: true, dynamicBullets: true, dynamicMainBullets: 5 }" preload-images="false" lazy="lazy"> <swiperSlide class="swiper-slide" v-for="n in 10" :key="n"> <div class="news-container"> <div class="news"><img class="news__image swiper-lazy" src="@/assets/img/lookism-transformed-transformed.png" alt=""/> <div class="swiper-lazy-preloader"></div> <div class="news__info"> <div class="news__title">title</div> <div class="news__description">description</div> <div class="news__buttons"> <button class="normal-button news-button">more</button> <button class="next-button"><span class="next-button__text">NEXT SLIDE BUTTON</span><img class="next-button__icon" src="@/assets/img/arrow-right.svg" alt=""/></button> </div> </div> </div> </div> </swiperSlide> </swiper> <script> export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => { console.log(swiper); }; const onSlideChange = () => { console.log('slide change'); }; return { onSwiper, onSlideChange, modules: [Navigation, Pagination, Scrollbar, A11y], }; }, }; </script>
Comment puis-je faire cela ? Je serai très reconnaissant pour votre aide
P粉2949544472023-11-03 11:27:25
Cela devrait faire l'affaire, il vous suffit d'importer useSwiper
并将其分配给 const 变量,然后在 div 元素中将其用作 swiper.slideNext()
Si vous ne souhaitez pas utiliser swiper sur vos propres éléments, supprimez le module navigation
.
C'est une source de documentation plus claire
https://swiperjs.com/vue#use-swiper