Dead simple Image Carousel en Pure JavaScript-simpleSlider. js

Vista prévia

Descripción

simpleSlider. js es un plugin de Slider de JavaScript ultraligero para crear un carrusel de imágenes adaptable, sin CSS, táctil y totalmente configurable con un suave < a href = "https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target = "_ blank" rel = "noopener noreferrer" > rAF animaciones impulsadas.

Funcionamiento

Sólo tiene que cargar el archivo JavaScript principal SimpleSlider. js en el documento y estamos listos para ir.

<script src="simpleslider.js"></script>

Opcionalmente, puede cargar el < a href = "https://hammerjs.github.io/" target = "_ blank" rel = "noopener noreferrer" > Hammer. js biblioteca para proporcionar la compatibilidad con gestos de deslizamiento.

<script src="/path/to/hammer.min.js"></script>

Inserte una serie de imágenes en el contenedor deslizante como esta:

<div id="myslider" class="slider">

<img src="1.jpg">

<img src="2.jpg">

<img src="3.jpg">

...
</div>

Inicializar la biblioteca y listo.

simpleslider.getSlider({

container: document.getElementById('myslider')
});

Todas las opciones posibles para personalizar el control deslizante.

simpleslider.getSlider({


// he HTML element that act as a container for the slider.

container: document.querySelector('*[data-simple-slider]),


// A list of children to be used as slides.

// You can use the querySelectorAll to have more flexibility on what children of the container element should be used as slides.

 children: container.children,


// Controls carousel auto-transition/slideshow. If value is true no transition will happen.

 paused: false,


 // Determines the css property to be animated.

prop: left,


// Tthe duration of animation transition.

duration: 0.5,


// Value determining the wait between each animation when auto-transition is enabled.

 delay: 3000,


// Initial value of slide elements when starting a transition animation.

 init: -100,


// The value a slide element should have when it is displayed.

show: 0,


// The value a slide will move to during a transition animation.

end: 100,


// The css unit value to be used.

 unit: '%',


// An ease function, you can use any of these. Defaults to defaultEase internal function.

ease: function(){},


// Invoked each time a slide changes.

onChange: function(){},


// Invoked at the end of the slide transition.

onChangeEnd: function(){}

});