Quiero agregar texto (en este caso el texto Inicio y las fechas) a los bullets del paginador del Swiper como se muestra en la imagen de ejemplo, pero no sé cómo hacer la función de javascript para que se vean visibles. La idea del Swiper es un timeline. Éste es un ejemplo https://jsfiddle.net/fsvsdbex/ , sin embargo tiene otras etiquetas html, no las propias del Swiper como las de mi código.
Este es mi código html:
<swiper-container id="SwiperRJ" class="mySwiper w-full h-full" direction="vertical" pagination="true" pagination-clickable="true" mousewheel="true">
<swiper-slide class="flex items-center w-full h-[30rem] rounded-3xl cover">
<img class="block object-cover w-full h-[30rem] rounded-3xl" src="" alt="">
<div class="absolute text-[--main-bg-color] block ml-24 mr-96">
<p class="roboto-light-italic mb-4">Inicio</p>
<h5 class="text-[--main-bg-color] text-5xl roboto-bold mb-4">
Lorem ipsum <span class="roboto-light">1</span>
</h5>
<p class="roboto-light text-star text-[18px]">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</swiper-slide>
<swiper-slide class="flex items-center w-full h-[30rem] rounded-3xl cover">
<img class="object-cover w-full h-[30rem] rounded-3xl" src="" alt=""/>
<div class="absolute text-[--main-bg-color] block ml-24 mr-96">
<p class="roboto-light-italic mb-4">Fecha 1</p>
<h5 class="text-[--main-bg-color] text-4xl roboto-light mb-4">
Lorem ipsum <span class="roboto-bold">1</span>
</h5>
<p class="roboto-light text-star text-[18px]">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</swiper-slide>
<swiper-slide class="flex items-center w-full h-[30rem] rounded-3xl cover">
<img class="object-cover w-full h-[30rem] rounded-3xl" src="" alt=""/>
<div class="absolute text-[--main-bg-color] block ml-24 mr-96">
<p class="roboto-light-italic mb-4">Fecha 2</p>
<h5 class="text-[--main-bg-color] text-4xl roboto-light mb-4">
Lorem ipsum <span class="roboto-bold">2</span>
</h5>
<p class="roboto-light text-star text-[18px]">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</swiper-slide>
<swiper-slide class="flex items-center w-full h-[30rem] rounded-3xl cover">
<img class="object-cover w-full h-[30rem] rounded-3xl" src="" alt=""/>
<div class="absolute text-[--main-bg-color] block ml-24 mr-96">
<p class="roboto-light-italic mb-4">Fecha 3</p>
<h5 class="text-[--main-bg-color] text-4xl roboto-light mb-4">
Lorem ipsum <span class="roboto-bold">3</span>
</h5>
<p class="roboto-light text-star text-[18px]">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</swiper-slide></swiper-container>
Este es el script con el que funciona el Swiper:
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
Intenté con esta función, pero no aparece el texto:
const SwiperRJ = new Swiper("#SwiperRJ", {
direction: "vertical",
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
const labels = [
"Inicio",
"Fecha 1",
"Fecha 2",
"Fecha 3",
"Fecha 4",
"Fecha 5"
];
return '<div class="' + className + '">' + (labels[index])+ '</div>';
}
},
mousewheel: true});
Les voy a agradecer mucho su ayuda.
new Swiper
da error en esa versión que estás usando. En cambio, si usas esta (la del enlace que has puesto) sí que funciona:https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/js/swiper.js
. Por lo tanto diria que algo hay en esa versiónswiper@11/swiper-element-bundle.min.js
que ha dejado de funcionar para la creación de objetos Swiper, o funciona de forma distinta y no lo pillo.