Biblioteca de carrusel versátil y adaptable para imágenes-Sebastian Carousel

Tiempo de ejecución: 30 minutos. Empezar

Autor: SebasWebDev
Views Total: 1,222
Sitio oficial: Ir a la web
Actualizado: August 10, 2018
Licencia: MIT

Vista prévia

Biblioteca de carrusel versátil y adaptable para imágenes-Sebastian Carousel

Descripción

Sebastian Carousel es una librería JavaScript de carrusel simple, ágil, flexible y rica en características diseñada para mostrar tus imágenes de forma sencilla.

Funcionamiento

Inserte la hoja de estilos ' Sebastian-Carousel. css ' y JavaScript ' Sebastian-Carousel. js ' en su documento HTML.

<link href="css/sebastian-carousel.css" rel="stylesheet">
<script src="js/sebastian-carousel.js"></script>

Añade tus imágenes al carrusel y configuración de la biblioteca de Sebastian Carousel usando los siguientes atributos de ' datos ':

  • Data-SC: requerido
  • Data-SC-Theme: ' fullwidth ', ' contenido-oscuro ', ' contenido-luz ', ' social ', ' editorial
  • Data-SC-AutoStart: si se inicia la reproducción automática en la carga de la página
  • Data-SC-paginación: si Mostrar la paginación por secuencia
  • Data-SC-showArrows: si Mostrar la navegación por secuencia
  • Data-SC-Interval: intervalo de reproducción automática en milisegundos
  • Data-SC-efecto: ' fade ' o ' Slide '
<div id="demo"



data-sc



data-sc-theme="fullwidth"



data-sc-autostart="true">

<div>



<img src="1.jpg">

</div>

<div>



<img src="2.jpg">

</div>

<div>



<img src="3.jpg">

</div>

<div>



<img src="4.jpg">

</div>

<div>



<img src="5.jpg">

</div>

...
</div>

También puede anular las opciones predeterminadas en JavaScript como:

{

effect: 'fade',

pagination: true,

showArrows: true,

autoStart: false,

theme: 'fullwidth',

interval: 3000
};

Registro de cambios

08/10/2018

  • Correcciones para cuando solo hay una diapositiva o no hay diapositivas

Te puede interesar: