Question 304290 in Html Question posted in
Some basic documentation can be found here.

Html – SwiperJS (React) – How to make 3 dot pagination

By default, when using the dynamicBullets parameter, the pagination display uses 5 points (one active, two previous, two next) – a total of 5. I’m trying to make the number of points 3 (one active, previous and next). To do this I am trying to change the classes property:

 :global(.swiper-pagination-bullet-active-prev-prev) {
     visibility: hidden;
 }

 :global(.swiper-pagination-bullet-active-next-next) {
     visibility: hidden;
 }

But in the end I get this effect (attached gif). You can see how the boundary point disappears when it reaches the container. How can I fix this? Maybe someone has a better solution than changing style properties. It is advisable to leave the default behavior.

enter image description here

Tags:

2

Answers


  1. 0

    instead of hiding the elements with visibility: hidden, you can try adjusting their opacity to make them less visible while still maintaining their space in the layout. For example:

    :global(.swiper-pagination-bullet-active-prev-prev),
:global(.swiper-pagination-bullet-active-next-next) {
    opacity: 0.5; /* Adjust the opacity value as needed */
}
    Login or Signup to reply.
  2. 0

    Try this

    :global(.swiper-pagination-bullet:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4))) {
    visibility: hidden;
}

:global(.swiper-pagination-bullet:nth-child(2),
        .swiper-pagination-bullet:nth-child(3),
        .swiper-pagination-bullet:nth-child(4)) {
    visibility: visible;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search