2

I know there are a lot of such topics and examples, and I've looked through a lot of them. But I can't make custom pagination for the slider. My custom pagination just doesn't display. I can't even change styles of regular pagination. It must be some silly mistake. But I can't find it for several hours. Please help me if you can. Swiper version 8.4.5

<div className="relative">
  <Swiper
    className="my-swiper"
    spaceBetween={10}
    slidesPerView={"auto"}
    navigation
    pagination={{
      el: ".swiper-pagination",
      type: "bullets",
      clickable: true,
      bulletClass: "bg-amber-400", //tailwind styles don't work here?
      bulletActiveClass: "bg-green-400",
    }}
  >
    {/* Slides go here */}
  </Swiper>
  <div className="absolute bottom-0 left-0 w-full">  //does not appear
    <div className="swiper-pagination"></div>
  </div>
</div>
Will Black
  • 350
  • 2
  • 17

2 Answers2

1

Make sure that the my-swiper class is properly defined and is not interfering with the slider's layout or functionality. You might want to check your CSS to ensure there are no conflicts.

In Swiper, the el property in the pagination configuration should point to a valid HTML element, not a CSS selector. You should provide the actual DOM element that you want Swiper to use for pagination. This could be a div element or any other appropriate container element.

<div className="relative">
  <Swiper
    className="my-swiper"
    spaceBetween={10}
    slidesPerView={"auto"}
    navigation
    pagination={{
      el: ".swiper-pagination", // Use a valid DOM element here
      type: "bullets",
      clickable: true,
      bulletClass: "bg-amber-400",
      bulletActiveClass: "bg-green-400",
    }}
  >
    {/* Slides go here */}
  </Swiper>
  <div className="absolute bottom-0 left-0 w-full">
    <div className="swiper-pagination"></div>
  </div>
</div>
Akshay Kumar
  • 367
  • 5
  • 15
0

I think you can try to pass a ref,

create it first,

const paginationRef = useRef<HTMLButtonElement | null>(null);

and pass it to your component and here in your code,

<Swiper
    className="my-swiper"
    ...
    pagination={{
      el: paginationRef.current,
      ...
    }}

It's is working for custom navigation

Kotana Sai
  • 1,207
  • 3
  • 9
  • 20
Clark
  • 1