Carrusel totalmente receptivo en vainilla JS-Carouseria

Vista prévia

Descripción

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

Funcionamiento

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

<link rel="stylesheet" href="/carouseria.min.css">
<script src="/carouseria.min.js"></script>

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

<div id="carouseria">

<div class="carouseria-item">


<div class="item-style">



<h2>Slide 1</h2>


</div>

</div>

<div class="carouseria-item">


<div class="item-style">



<h2>Slide 2</h2>


</div>

</div>

<div class="carouseria-item">


<div class="item-style">



<h2>Slide 3</h2>


</div>

</div>

... more slides here ...
</div>

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

• [tamaño]: Altura del carrusel (en PX, in o VH)
• [Loop]: Bucle infinito, verdadero o falso.
• [dirección]: Vertical u horizontal.
• [reproducción automática | milisecs]: Reproducción automática e intervalo.
• [índice | orientación]: Índice visual y orientación.
• [NAV | Orientation]: Los botones de navegación y la orientación

setCarousel("[size] [loop] [direction] [autoplay|millisecs] [index|orientation] [nav|orientation]");

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

• Next (): Realiza la transición del carrusel al siguiente elemento.
• PREV (): Realiza la transición del carrusel al elemento anterior;
• Mostrar (artículo, reverso): Muestra un elemento especificado mediante animación normal o invertida.
• Hide (elemento, reverso): Oculta un elemento especificado mediante animación normal o invertida.
• changeFocus (elemento, inverso): Cambia el enfoque del elemento actual al elemento pasado como parámetro.
• refreshFocus (inverso): Actualiza el elemento que está actualmente en el foco, lo que le permite elegir entre la animación normal o invertida.