Carrusel de fácil respuesta en Vanilla JavaScript-deslizador de imagen ideal

Vista prévia

Descripción

Ideal Image Slider es una biblioteca JS independiente y fácil de usar que le permite crear deslizadores de imágenes adaptables, accesibles, extensibles, táctiles y listos para la retina con suaves transiciones de diapositivas con CSS3 o fade.

Funcionamiento

Importa los archivos principales de JavaScript y CSS a tu página web.

<link rel="stylesheet" href="ideal-image-slider.css">
<script src="ideal-image-slider.js"></script>

Incluya un tema CSS de su elección:

<link rel="stylesheet" href="default.css">

Incluya extensiones incorporadas cuando sea necesario:

<script src="extensions/captions/iis-captions.js"></script>
<script src="extensions/bullet-nav/iis-bullet-nav.js"></script>

Envuelve tus imágenes con versiones retina en un contenedor DIV llamado ' Slider ':

<div id="slider">

<img src="img/1.jpg" data-src-2x="img/[email protected]" alt="Slide 1" />

<img data-src="img/2.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 2" />

<a href="http://example.com"><img data-src="img/3.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 3" /></a>

<img data-src="img/4.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 4" />
</div>

Cree una nueva instancia del deslizador de imagen ideal.

var slider = new IdealImageSlider.Slider('#slider');

Active el control deslizante de imagen.

slider.start();

Configuración del control deslizante de imagen pasando las siguientes opciones como el primer parámetro para el slider método.

var slider = new IdealImageSlider.Slider({


selector: '',


height: 'auto', // "auto" | px value (e.g. 400) | aspect ratio (e.g. "16:9")


initialHeight: 400, // for "auto" and aspect ratio


maxHeight: null, // for "auto" and aspect ratio


interval: 4000,


transitionDuration: 700,


effect: 'slide',


disableNav: false,


keyboardNav: true,


previousNavSelector: '',


nextNavSelector: '',


classes: {



container: 'ideal-image-slider',



slide: 'iis-slide',



previousSlide: 'iis-previous-slide',



currentSlide: 'iis-current-slide',



nextSlide: 'iis-next-slide',



previousNav: 'iis-previous-nav',



nextNav: 'iis-next-nav',



animating: 'iis-is-animating',



touchEnabled: 'iis-touch-enabled',



touching: 'iis-is-touching',



directionPrevious: 'iis-direction-previous',



directionNext: 'iis-direction-next'


}
});

Funciones de devolución de llamada.

var slider = new IdealImageSlider.Slider({


onInit: function() {},


onStart: function() {},


onStop: function() {},


onDestroy: function() {},


beforeChange: function() {},


afterChange: function() {}
});

API methods.

// active the slider
slider.start();

// stop the slider
slider.stop();

// back to the prev slide
slider.previousSlide();

// goto the next slide
slider.nextSlide();

// goto slide 2
slider.gotoSlide(2);

// destroy the slider
slider.destroy();

// get an attribute value
slider.get(attribute);

// set an attribute
slider.set(attribute, value);