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

score 21 · Answer 1 · answered Jul 09 '22 at 15:14

Since there is no info on documentation about these, I've found how, looking into the bundle files.

There you can encounter the variables that can be modified to customize your slider, as follows:

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

Just add this variables and set whatever color/size/proprierty you want on your swiper slider.

Ex:

<Swiper style={{
  "--swiper-pagination-color": "#FFBA08",
  "--swiper-pagination-bullet-inactive-color": "#999999",
  "--swiper-pagination-bullet-inactive-opacity": "1",
  "--swiper-pagination-bullet-size": "16px",
  "--swiper-pagination-bullet-horizontal-gap": "6px"
}}>
  {content}
</Swiper>

I looked up these lines in the node modules and found out more. If someone wants to modify the pagination or navigation in detail, you can search for `swiper-bundle.css` under the node_modules/swiper directory. There you can find the variables and the CSS that is defined for components of the swiper. — Ankit Sharma, Dec 27 '22 at 20:11

score 17 · Answer 2 · edited Oct 30 '21 at 07:37

17

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

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

edited Oct 30 '21 at 07:37

Dharman

30,962
25
85
135

answered Oct 30 '21 at 07:31

Freesoul

292
2
12

what if there is no global css? – Biax20 Apr 25 '23 at 01:48
@Biax20 just add it to whatever css file that is in your project, you can name it anything you want. – Freesoul Apr 25 '23 at 11:00

Vitor Martins · Answer 3 · 2021-08-04T13:40:35.703

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;
  }
}

Selector ":global(.swiper-pagination-bullet)" is not pure (pure selectors must contain at least one local class or id). i get this erroe when i use your code — Salil Rajkarnikar, Sep 23 '21 at 14:55
@SalilRajkarnikar Please share more details, like the code involved and your attempts to resolve the problem — Vitor Martins, Sep 25 '21 at 13:01

score 6 · Answer 4 · answered Oct 17 '21 at 12:41

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;
}

score 2 · Answer 5 · answered Jun 15 '21 at 20:56

 /* 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;
}

score 2 · Answer 6 · edited Aug 28 '22 at 04:41

2

Just add a style:

style={{
  "--swiper-navigation-color": "#000",
  "--swiper-pagination-color": "#fff",
}}

edited Aug 28 '22 at 04:41

thiagobraga

1,519
2
15
29

answered Aug 23 '22 at 20:43

Deucalion

21
2

Please format properly the code – Jonatan Kruszewski Aug 27 '22 at 15:26

score 1 · Answer 7 · answered Apr 18 '22 at 15:49

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).

score 1 · Answer 8 · answered Jun 29 '22 at 20:39

I particularly used useEffect on page load and attached the css to the pagination bullet class:

   useEffect(() => {
     const stylesheet = document.styleSheets[0];
     stylesheet.insertRule(".swiper-pagination-bullet-active { background: #284E80 !important;}", 0);   
   }, []);

score 1 · Answer 9 · answered Feb 04 '23 at 08:08

1

This inline style seems to be the only way to change the css of these shadow elements when using web component version of swipe, which they recommend anyway... Horrific documentation by swiper.

<swiper-container pagination="true" class="cursor-pointer" style="--swiper-pagination-color: white;">
  <!-- add other swiper variables above, found in docs https://swiperjs.com/swiper-api#pagination-css-custom-properties -->
  <swiper-slide>
    <img class="" src="xyz">
  </swiper-slide>
</swiper-container>Q

answered Feb 04 '23 at 08:08

Leon A

135
1
9

Even more horrific when you consider the fact they actively discourage developers from using Vue components in the future in favor of this unfamiliar web component approach. – Leon A Feb 04 '23 at 08:08
https://css-tricks.com/styling-a-web-component/ further info – Leon A Feb 04 '23 at 08:16
Another way would be to create your own pagination... – Raphaël Balet Apr 21 '23 at 09:13

score 0 · Answer 10 · answered Jan 28 '21 at 12:12

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;
}

score 0 · Answer 11 · edited Aug 05 '22 at 07:44

0

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;
}

edited Aug 05 '22 at 07:44

Penny Liu

15,447
5
79
98

answered Dec 31 '21 at 11:12

SnowdenMoses

1
1

score 0 · Answer 12 · answered Jun 21 '23 at 23:27

0

This worked for me,

.swiper-pagination {
  --swiper-pagination-color: goldenrod;
}

answered Jun 21 '23 at 23:27

Mohammad Zaid Pathan

16,304
7
99
130

score 0 · Answer 13 · answered Aug 20 '23 at 18:44

0

swiper-container {
  width: 100%;
  height: 70%;
 
  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
  --swiper-pagination-color: var(--ion-color-primary, #080c12);
}

answered Aug 20 '23 at 18:44

Emmanuel Iyen-Mediatrees

159
8

SwiperJS - How do you style the Pagination Bullets?

13 Answers13

Linked