I am working with Swiper 6.02 and I am wondering how to get rid of the dots that show the current page. I want to use the "Center" mode, but without the page dots at the bottom. I have tried several suggested solutions, but the only one that has really worked is to disable the "Pagination" option, but that also disables the centering of the slides.

            <Swiper
                slidesPerView={1.2}
                centeredSlides={true}
                spaceBetween={30}
                pagination={{
                    clickable: true,
                }}
                className="mySwiper"
            >
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>
                <SwiperSlide>Slide 5</SwiperSlide>
                <SwiperSlide>Slide 6</SwiperSlide>
                <SwiperSlide>Slide 7</SwiperSlide>
                <SwiperSlide>Slide 8</SwiperSlide>
                <SwiperSlide>Slide 9</SwiperSlide>
            </Swiper>

Basically I want Example without the pagination dots.

I am working with Swiper 6.02 and I am wondering how to get rid of the dots that show the current page. I want to use the "Center" mode, but without the page dots at the bottom. I have tried several suggested solutions, but the only one that has really worked is to disable the "Pagination" option, but that also disables the centering of the slides.

            <Swiper
                slidesPerView={1.2}
                centeredSlides={true}
                spaceBetween={30}
                pagination={{
                    clickable: true,
                }}
                className="mySwiper"
            >
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>
                <SwiperSlide>Slide 5</SwiperSlide>
                <SwiperSlide>Slide 6</SwiperSlide>
                <SwiperSlide>Slide 7</SwiperSlide>
                <SwiperSlide>Slide 8</SwiperSlide>
                <SwiperSlide>Slide 9</SwiperSlide>
            </Swiper>

Basically I want Example without the pagination dots.

• javascript
• reactjs
• swiper.js

• 2 Remove this pagination={{clickable: true,}} from your code (That's it). I didn't find any bug related to disable pagination and center mode (Try swiper 7 maybe). – Ezra Siton Commented Oct 12, 2021 at 9:55

2 Answers 2

I used this on the CSS file, and it worked!

.swiper-pagination-bullets {
    display: none;
}

cheers!

<Swiper showsPagination={false} />