使用 Vue.js 在 Swiper 中创建用于幻灯片导航的自定义按钮
我需要删除默认导航（nextEl、prevEl）并使带有“下一张幻灯片按钮”文本的按钮滚动到下一张幻灯片
<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>
我怎样才能做到这一点？我将非常感谢您的帮助
