Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti provident facere mollitia rerum fuga nihil praesentium obcaecati consequuntur soluta quibusdam laborum culpa rem, possimus illum, dicta laudantium? Tempore, iste magnam.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti provident facere mollitia rerum fuga nihil praesentium obcaecati consequuntur soluta quibusdam laborum culpa rem, possimus illum, dicta laudantium? Tempore, iste magnam.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti provident facere mollitia rerum fuga nihil praesentium obcaecati consequuntur soluta quibusdam laborum culpa rem, possimus illum, dicta laudantium? Tempore, iste magnam.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti provident facere mollitia rerum fuga nihil praesentium obcaecati consequuntur soluta quibusdam laborum culpa rem, possimus illum, dicta laudantium? Tempore, iste magnam.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti provident facere mollitia rerum fuga nihil praesentium obcaecati consequuntur soluta quibusdam laborum culpa rem, possimus illum, dicta laudantium? Tempore, iste magnam.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti provident facere mollitia rerum fuga nihil praesentium obcaecati consequuntur soluta quibusdam laborum culpa rem, possimus illum, dicta laudantium? Tempore, iste magnam.
"Paginador tipo carrusel by Jizra" es un paginador horizontal con el clásico efecto de carrusel infinito construido en Html 5, Css 3 y javascript.
Esta es la primera versión beta de este paginador por tanto cuenta con un funcionamiento muy básico, puede tener fallos y no funcionar en todos los navegadores.
1: Agrega la etiqueta de estilos entre tu etiqueta <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://jizradesign.github.io/releases/jd-carrusel.min.css">
2: Agrega el maquetado html donde quieras poner tu paginador (puedes asignar el nombre que desees al id esto es solo un ejemplo).
<section id="cont__paginador>
<article class="item__paginador">
</article>
</section>
3:Repite este fragmento dentro de la etiqueta <div id="cont__paginador"> por cada elemento que quieras agregar (puedes asignar el nombre que desees a la clase esto es solo un ejemplo, recuerda que todos los elementos deben llevar la misma clase).
<article class="item__paginador">
</article>
4: Agrega el Script antes del cierre de tu etiqueta </body>
<script src="https://jizradesign.github.io/releases/jd-carrusel.min.js"></script>
5: Crea un script con la clase: JdSider('#jd-carrusel','jd-item__carrusel');
<script>
window.addEventListener('load', ()=> {
const slider = new JdSlider('#jd-carrusel','jd-item__carrusel')
slider.run();
});
</script>
6: El método run() puede recibir dos atributos, el primero un booleano true para la reproducción automática, el segundo un number que es el tiempo de transición en mili segundos : slider.run(true, 5000);
<script>
window.addEventListener('load', ()=> {
const slider = new JdSlider('#jd-carrusel','jd-item__carrusel')
slider.run(true, 5000);
});
</script>
Como funciona? :
La clase JdSlider('#cont__paginador','item__paginador'); requiere dos atributos:
id del elemento contenedor o padre JdSlider('#cont__paginador','item__paginador');
class de los elementos hijo JdSlider('#cont__paginador','item__paginador');
El método run encargado de inicializar el silider tambien recive dos atributos, el primero un booleano true para la reproducción automática, el segundo un number que es el tiempo de transición en mili segundos .run(true, '5000')
.run() sin atributos deja el funcionamiento manual.