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

Familiarize

Answer 1

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>

Walcoff

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. – Glindaglinka

Answer 2

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

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

Resolve

what if there is no global css? – Felicefelicia

@Felicefelicia just add it to whatever css file that is in your project, you can name it anything you want. – Resolve

Answer 3

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

Shive

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 – Supper

@SalilRajkarnikar Please share more details, like the code involved and your attempts to resolve the problem – Shive

To me this seems like best way to preserve the benefits of CSS Modules when needing to attach styles to elements added to the dom by 3rd party libraries. I ended up using this approach for the Swiper navigation buttons in this css module to style Swiper in this component. – Giacopo

Answer 4

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

Ogilvy

Answer 5

Just add a style:

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

Trireme

Please format properly the code – Tumefaction

Answer 6

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

Froh

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

Utimer

Answer 8

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);   
   }, []);

Circumstantiality

Answer 9

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

Xylol

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. – Xylol

css-tricks.com/styling-a-web-component further info – Xylol

Another way would be to create your own pagination... – Thorr

Answer 10

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

Cindycine

Answer 11

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

Patina

Answer 12

This worked for me,

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

Barron

Answer 13

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

Wrestling

Answer 14

this solution works for me in the Next.js you have to add this to your global CSS: `

:root {
    --swiper-theme-color: red!important;
    --swiper-preloader-color: red !important;
    --swiper-wrapper-transition-timing-function: initial;
} 

Reconcilable

Answer 15

you can add a CSS file and overwrite the inner classes like that:

.swiper {
  --swiper-navigation-color: #fff !important;
  --swiper-pagination-color: #fff !important;
}

Gingery