0

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.

[Imagen de ejemplo]

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.

6
  • Hola estás en SOes, en español, si quieres dirigete a Stack Overflow o traduce la pregunta.
    – Excorpion
    Commented el 4 nov. a las 19:26
  • Ya cambié el idioma, pero no sé si ya se actualizó. Gracias
    – Ana B
    Commented el 4 nov. a las 19:40
  • Entonces cual es el problema al agregarlos ?
    – Excorpion
    Commented el 4 nov. a las 21:54
  • Lo intenté con una función. Ya la agregué
    – Ana B
    Commented el 4 nov. a las 22:00
  • Lo que veo raro en tu código es que la creación del 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ón swiper@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.
    – masterguru
    Commented el 5 nov. a las 8:33

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.