Multiple slides with different colors on the pagination?

[Devotee007]

I have a page that contains multiple slides, it has worked great. But now we want to have a slide on a different background and needs to change the colour of the pagination. Is it possible to have one slide with different colour and the rest in the colour we've used before?

[Arhell]

Hello, add a custom class and with css do it.

[Devotee007]

I loop out the different slides with this, there I add a custom class. Can I use that class to get the custom secondary colour? Sorry for these beginners questions.

const customSlider = document.querySelectorAll('.swiper');

    for( i=0; i< customSlider.length; i++ ) {
        customSlider[i].classList.add('swiper-container-' + i);

        const swiper = new Swiper('.swiper-container-' + i, {

            direction: 'horizontal',
            slidesPerView: 'auto',
            slidesPerGroupSkip: 1,
            
            grabCursor: false,
            speed: 500,
            centerInsufficientSlides: true,
            centeredSlides: false,
            loop: false,
            watchOverflow: true,
            shortSwipes: true,
            threshold:50,

            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
                clickable: true,
                bulletClass: 'custom-bullet-primary',
                modifierClass: 'swiper-pagination-custom',
            },
        });
    }

[Arhell]

Check the output, if the class is pulled up, then everything is ok.

If not, then just initialize the 2nd slider
document.querySelectorAll('.swiper2');

The same settings with only an additional class

[Devotee007]

Do you mean I should, on the slider that I want to have different color, just add a second class and then use a copy of the above code and change the const customSlider = document.querySelectorAll('.swiper'); with the new class and have a specific for loop for that one? Or do you mean I should use the above code with the addition of an if statement like classList.contains?

[Arhell]

Not necessarily, you can just initialize 2 sliders without loops.

In html <div class="swiper1"> document.querySelectorAll('.swiper1')
initialize it and second <div class="swiper2 customClass"> document.querySelectorAll('.swiper2')

two initializations, that's fine.

[Devotee007]

Thanks I have two different initialisations now. It works great. Will see if I can get them to the same initialization later. :)