Mixed navigation

[philthebass]

Hi all,

I'm new to Swiper and using it on a project at the moment.

I'm using it with Wordpress and Oxygen Builder and so far so good.

Is it possible to mix navigation components? I'd like to have both the bullet nav and a page slide counter as well.

I have this for displaying the bullets

`jQuery(document).ready( function(){
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 0,
speed: 1500,
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});

});
`

Is it possible to add the slide counter like this demo so I have both the bullets and counter https://codesandbox.io/s/jx6vbg?file=/index.html:2384-2401

Thanks

[Arhell]

https://swiperjs.com/demos#pagination-fraction
API
https://swiperjs.com/swiper-api#pagination

[Arhell]

I pasted your config here
https://codepen.io/swmj/pen/RwPxQzR
Everything is working.

But not testing on Wordpress and Oxygen Builder

[philthebass]

Thaks Ihor, but that's not quite how I meant.

My slider is set up vertically with the bullet navigation which all works fine.

What I'm trying to figure out is how I can also also include a slide counter. I have a place holder div set up ready, but I can't figure out how to have both in my slider.

[Arhell]

Unfortunately, I did not find such an option.
You can try to do it yourself
https://swiperjs.com/demos#pagination-custom

#3054 (comment)

[philthebass]

Thanks. I've been trying to combine both by using a custom class for the slide counter, but haven't been able to figure it out yet.

I'll keep trying.

Thanks for your help

[Arhell]

You are welcome.