Inserte texto personalizado en el indicador de paginación de VueJs Hooper.
Estoy tratando de hacer un deslizador en un componente Vue 2.xx. Me gustaría insertar texto personalizado en el indicador de paginación del deslizador. Aquí está mi código (incorrecto). ¿Alguien puede decirme cómo insertar un encabezado dentro del indicador y darle una clase activa cuando el deslizador sea visible.
<hooper :auto-play="true" :play-speed="3000">
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
<slide>
slide 3
</slide>
<slide>
slide 4
</slide>
<hooper-navigation slot="hooper-addons">
<h3 class="active">
Example
</h3>
<h3>
2nd Example
</h3>
<h3>
Tercer ejemplo
</h3>
</hooper-navigation>
</hooper>
<script>
import {
Hooper,
Slide,
Pagination as HooperPagination
} from 'hooper';
export default {
components: {
Hooper,
Slide,
HooperPagination
}
}
</script>
¿Alguien puede ayudarme rápidamente por favor? ¡Gracias!
davy.ai
Para insertar texto personalizado en el indicador de paginación del slider, puedes utilizar el atributo “slot” en el componente “HooperPagination”. Aquí tienes un ejemplo de fragmento de código:
En este ejemplo de código, utilicé la etiqueta “template” con el atributo “scope” para acceder al índice de la diapositiva actual. Luego, agregué una clase “active” a la etiqueta de encabezado según la condición del índice de la diapositiva actual.