1

I use the slider swiper library in my react project. I have initialized this slider and everything works, but I want to style my pagination. I have added some styles to my slider swiper component object, but I also want to add some spacing to bullets from the top. So It is the CSS property margin-top. But I don't know where this property is in the slider swiper. Please, help me to add the margin-top property to my bullets.

Here is my code:


function Section4(props) {
    return (
        <div className="section4">
            <div className="section-slider">
                <Swiper
                    modules={[Navigation, Pagination]}
                    spaceBetween={50}
                    slidesPerView={1}
                    onSlideChange={() => console.log('slide change')}
                    onSwiper={(swiper) => console.log(swiper)}
                    navigation
                    pagination={{ clickable: true }}
                    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": "10px"
                    }}
                >
                    <SwiperSlide>Slide 1</SwiperSlide>
                    <SwiperSlide>Slide 2</SwiperSlide>
                    <SwiperSlide>Slide 3</SwiperSlide>
                    <SwiperSlide>Slide 4</SwiperSlide>
                </Swiper>
            </div>
        </div>
    );
}

export default Section4;
Roman
  • 33
  • 7
  • How about setting height to the Swiper component? The pagination bullets display at the bottom of the Swiper component by default. – mythosil Mar 19 '23 at 10:58

1 Answers1

0
.swiper-pagination {
    position: relative !important;
    margin-top: [20px or desired margin];
}

.swiper-pagination class has a position of absolute by default, adding margin to position the bullets to where you desire will not work hence changing the position to relative as seen in the code.

firerum
  • 1
  • 1
  • 1
    Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Aug 08 '23 at 14:25
  • Got it. Thanks for the feedback. @MarkRotteveel Because .swiper-pagination class has a position of absolute by default, adding margin to position the bullets to where you desire will not work hence changing the position to relative as seen in the code. – firerum Aug 19 '23 at 19:11
  • Please edit your answer to include the explanation. Comments are considered transient (and under some conditions can be hidden or deleted). – Mark Rotteveel Aug 20 '23 at 09:43