How to make custom slide change button in Swiper? (Vue.js) - html

Question

I need to delete default navigation (nextEl, prevEl) and make button with "NEXT SLIDE BUTTON" text scroll to next slide
<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>
How can i do that? I will be very grateful for your help

Answer 1

This should do it, all you need to do is import useSwiper and assign it to a const variable and use it in the div element as swiper.slideNext()
And also if you do not wish to use swiper's own elements then remove the navigation module.
Here's the doc source which is clearer
https://swiperjs.com/vue#use-swiper