I've been attempting to create a swiper with previous, active, and next buttons while hiding the other buttons. Unfortunately, none of my attempts have been successful. I'm currently using version 9.3.0 of the swiper package. Any suggestions on what steps I should take next?
Here is the HTML code snippet:
<div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets swiper-slide-active">
<span class="swiper-pagination-bullet swiper-button-prev" tabindex="0" role="button" aria-label="Go to slide 1"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
<span class="swiper-pagination-bullet swiper-button-next" tabindex="0" role="button" aria-label="Go to slide 4"></span>
</div>
Below is the CSS styling:
.swiper-button-next,
.swiper-button-prev {
width: 11px;
height: 11px;
display: block;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: all .3s;
&-active {
opacity: 1;
background: #747474;
height: 30px;
box-shadow: 0px 0px 20px rgba(109, 109, 109, 0.3);
@media screen and (max-width: 768px) {
height: 11px;
width: 30px;
}
}
}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active):not(.swiper-button-prev):not(.swiper-button-next) {
display: none;
}
These are the JavaScript swiper properties being used:
export default {
name: 'Home',
components: {
Swiper
},
methods:{
},
mounted(){
const swiper = new Swiper('.blog-slider', {
spaceBetween: 30,
effect: 'fade',
direction: 'horizontal',
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
clickable: true,
}
});
}
}
Currently, only the active button is visible as a result of these settings.