SwiperJS - How do you style the Pagination Bullets?

Question

Using SwiperJS in my ReactJS application. I've imported the default style bundle, but can't figure out how to style the pagination container or the bullets.

In the pagination: param within ... Every time I change the el: param, the pagination just disappears. Every time I change the bulletClass: the styles I add in my css doesn't get applied.

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Pagination, Navigation, A11y } from 'swiper';
import 'swiper/swiper-bundle.css';
SwiperCore.use([Navigation, Pagination, A11y]);

return (
<>
<Swiper
    spaceBetween={50}
    slidesPerView={1}
    navigation
    pagination={{
       clickable: true,
       el: `swiper-container swiper-container-testClass`,
       bulletClass: `swiper-pagination-bullet swiper-pagination-testClass`
    }}
    wrapperTag='ul'
>
    <SwiperSlide tag='li' key={1}>
        {<div>My Data</div>}
    </SwiperSlide>
</Swiper>
</>
)

Anyone know how you can override the default styles? Namely, I'm looking to move the pagination-container above the slide content and not inside the slide at the bottom (can't even see it).

API in question: Swiper React

Answer 1

I had the same problem and the way I solved is:

Import statements

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css"

// Import my scss file
import styles from './styles.module.scss'

// import Swiper core and required modules
import SwiperCore, {
  Pagination
} from 'swiper/core';

// install Swiper modules
SwiperCore.use([Pagination]);

First, wrapped my component with SliderWrapper class, like this:

return (
   <div className={styles.SliderWrapper}>
     <Swiper
       pagination={true}
    >
      <SwiperSlide>
         <div>{My Data}</div>
      </SwiperSlide>
      <SwiperSlide>
         <div>{My Data}</div>
      </SwiperSlide>
      <SwiperSlide>
         <div>{My Data}</div>
      </SwiperSlide>
    </Swiper>
  </div>
)

Second, I checked in browser which classes should I use for overriding the styling. In my case was: .swiper-pagination-bullet and .swiper-pagination-bullet-active

Then, the trick was to use :global in my css for styling pagination from swiper, which I used like the example below:

.sliderWrapper {
    :global(.swiper-pagination-bullet) {
      background: white;
      width: 1rem;
      height: 1rem;
      border-radius: .5rem;
      opacity: 1;
  }
  
  :global(.swiper-pagination-bullet-active) {
    background-color: blue;
    width: 5rem;
    height: 1rem;
    border-radius: .5rem;
  }
}

Answer 2

To style pagination bullets simply add this line to your global CSS

.swiper-pagination-bullet-active {
     background-color: #000 !important;
}

Answer 3

You can override the default styles of the pagination bullets using these class names:

/* target the active bullet */
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: blue;
  opacity: 1;
}

/* target all bullets */
.swiper-pagination-bullet {
  background-color: red;
  opacity: 1;
}

Answer 4

 /* change the size of the bullet and active color */

.swiper-pagination-bullet {
        background-color: blue;
        display: inline-block;
        width: 2rem;
        height: 2rem;
    }

    /* change color of next 2 bullets in sequence to white*/

.swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next {
    background-color: white;
}

    /* change color of previous bullet to white*/

.swiper-pagination-bullet-active-prev {
    background-color: white;
}

Answer 5

i had similar problem with Vue.js, I think only way to ovverride default styles is to use css !important but not always, for example if you want to change bullet collor youn can access bullet default styles, without forcing default styles

/* change active bullet color to red */
.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    background-color: red;
}


/*move swiper pagination on top to image */
.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    top: 0 !important;
}

Answer 6

Here is how to go about it

For all the bullets, do the below

.swiper-pagination .swiper-pagination-bullet {
opacity: 1;
background-color: white;}

While for the active bullet do the below:

.swiper-pagination .swiper-pagination-bullet-active {
background-color: black;}

Answer 7

Access the swiper-bundle.css file (located in the node_modules > swiper folder) and indicate the classes, in my case it was .swiper-pagination-bullet and .swiper-pagination-bullet-active:

.swiper-pagination-bullet { /** Stylization of bookmarks that are not selected */
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
.swiper-pagination-bullet-active { /** Marker styling of selected image in carousel */
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

IMPORTANT: To avoid losing the changes made, do not make the changes directly in the file, bring the classes to your css, and then make the changes (you will bring the 2 identified elements to your css and change them).