Presentación de diapositivas configurable Javascript

Vista prévia

Descripción

Slideshow. js es una biblioteca de JavaScript puro para la construcción de una presentación de diapositivas/carrusel totalmente configurable y móvil para mostrar sus imágenes.

Características

• Fácil de usar.
• Soporta deslizar el dedo y arrastrar el ratón.
• Modo de reproducción automática.
• Bucle infinito.
• Efectos de transición personalizados.

Funcionamiento

Enlace a los archivos Slideshow. js y Slideshow. CSS en su archivo HTML.

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

Añada imágenes y leyendas utilizando div UL o figure figcaption Tags.

<div class="slideshow demo">

<div class="slideshow-slide-list">


<figure class="slideshow-slide">



<img src="1.jpg" alt="image 1">



<figcaption class="slideshow-caption">Slide 1 caption</figcaption>


</figure>


<figure class="slideshow-slide">



<img src="2.jpg" alt="image 2">



<figcaption class="slideshow-caption">Slide 2 caption</figcaption>


</figure>


<figure class="slideshow-slide">



<img src="3.jpg" alt="image 3">



<figcaption class="slideshow-caption">Slide 3 caption</figcaption>


</figure>


<figure class="slideshow-slide">



<img src="4.jpg" alt="image 4">



<figcaption class="slideshow-caption">Slide 4 caption</figcaption>


</figure>

</div>
</div>

Establezca una altura fija en el CSS.

.demo { height:420px; }

Presentación de inicialice. Js.

Slideshow(el, options);

Todas las opciones de configuración con valores predeterminados.

// allow swipe to slide
allowSwipe: true,

// autoplay
autoplay: false,

// shows controls at the bottom
controlsBelow: false,

// delay in ms
delay: 5000,

// infinite loop
loopSlides: true,


// show navigation arrows
navArrows: true,

// CSS classes for next/prev buttons
navNextClass: '',
navPrevClass: '',

// shows play button
playButton: false,

// CSS class for play button
playButtonClass: '',

// number of times for autoplay to loop over slides
playLoop: -1,

// autoplay when user uses navigation arrows
pauseOnUserNav: false,

// shows indicators
showIndicators: false,

// slide to start on
startOnSlide: 1,

// transition delay
transitionTime: 500,

// easing function
transitionTimingFunction: 'ease-out',

// fade or slide
transitionEffect: 'fade'