Text instead of slide indicator

[Tomioka-Giyuu]

I used swiper to create a nested slider (vertical slider in a horizontal slider), I am trying to write text instead of the slider page indicator. anyone here has any clue on how to pull that off?

[hajirasyafi]

please see https://swiperjs.com/swiper-api#pagination,

[VIPStephan]

If I wanted to use text from the respective slide itself, how would that be done? Like, in each slide there is an element that contains a title, and I wanted that title to show up in the pagination. I want to get that text dynamically, but how do we access the current slide’s content?

[hajirasyafi]

here the sandbox : https://codesandbox.io/p/devbox/swiper-custom-bullet-x65ff8

The simple way :

"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
import "swiper/css";

// dont import below
// import "swiper/css/pagination"


interface Blog {
  title: string;
  content: string;
}
const blogPost: Blog[] = [
  {
    title: "The lucky ant",
    content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
  {
    title: "Party Night",
    content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
  {
    title: "No Rule No Life",
    content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
];

const SwiperExample = () => {
  return (
    <div className="">
      <Swiper
        modules={[Pagination]}
        pagination={{
          el: ".container-for-pagination",
          clickable: true,
          type: "bullets",
          renderBullet: (index, className) => {
            return `<button class="${className} swiper-pagination-custom-bullet">${blogPost[index].title}</button>`;
          },
        }}
      >
        {blogPost.map((value, index) => (
          <SwiperSlide
            key={`slide-${index}`}
            className=""
          >
            <div className="">Title : {value.title}</div>
            <div>{value.content}</div>
          </SwiperSlide>
        ))}
      </Swiper>
      {/* Define container for pagination */}
      <div className="container-for-pagination"></div>
    </div>
  );
};

export default SwiperExample;

styling for css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer components {
  .swiper-pagination-custom-bullet {
    @apply p-2 border rounded;
  }
  .swiper-pagination-custom-bullet-active {
    @apply bg-white/20;
  }
}

[VIPStephan]

Yeah, sorry for not clarifying: I’m using Swiper Core. Can you give me a hint on that?

[hajirasyafi]

what framework do you use?
If you using Swiper core, You can still do it in the same way as above :

const swiper = new Swiper('.swiper', {
  el: ".container-for-pagination",
  bulletActiveClass: "swiper-pagination-custom-bullet-active",
  clickable: true,
  type: "bullets",
  renderBullet: function (index, className) {
    `<span class="${className} swiper-pagination-custom-bullet">${blogPost[index].title}</span>`;
  }
});

in your HTML file :

<div class="container-for-pagination"></div>

in your css file :

.swiper-pagination-custom-bullet {

}

.swiper-pagination-custom-bullet-active {

}

everything you need is here : https://swiperjs.com/swiper-api#pagination-parameters

[VIPStephan]

Ah, OK, so basically store the content in an array first and then get the array item that corresponds to the slide number. I was thinking I would just get it from the current slide’s actual content to avoid having to loop through the items multiple times in the backend but renderBullet doesn’t provide the swiper function parameter that the renderCustom function provides (and renderCustom only renders the current item, not all of them as renderBullet does).
I guess I have to do it the way you suggested, then. Thanks.

[javierdebug]

If you need to customize the UI component, something like this should work (React):

 const swiperRef = useRef<SwiperCore>();
 const [activeIndex, setActiveIndex] = useState(0);
  <Swiper
     onBeforeInit={(swiper) => {
        swiperRef.current = swiper;
     }}
     onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
     ...
  >
  ...
  </Swiper>
   
   {items.map((item, index) => (
      <button
         key={index}
         disabled={activeIndex === index}
         onClick={() => swiperRef.current?.slideTo(index)}
      >
        <span>
          {item.title}
         </span>
        </button>
   ))}