Presentación de fondo totalmente adaptable con JavaScript puro-PureSlider

Vista prévia

Descripción

PureSlider es una biblioteca de JavaScript pequeña y pura que le ayuda a generar una presentación/Slider adaptable, automático y totalmente configurable desde HTML/JavaScript sin formato.

Funcionamiento

Primero debe incluir los archivos de PureSlider en la página HTML.

<link rel="stylesheet" href="dist/css/pure_slide.min.css">
<script src="dist/js/PureSlider.min.js"></script>

Crea un conjunto de diapositivas para la presentación/Slider y añade tus propias imágenes como fondos a ellas. El atributo ' Data-Slide-laps ' se utiliza para especificar el retardo de transición en segundos para cada diapositiva.

<div class="ps-slider" id="mySlider">

<div class="ps-slides" id="mySlides">


<div id="slide10" class="ps-slide" data-slide-laps="5" style="background-image: url('1.jpg');">



<div class="inner">




<h1>Supports Inner Content</h1>



</div>


</div>


<div id="slide20" class="ps-slide" data-slide-laps="4" style="2.jpg');"></div>


<div id="slide30" class="ps-slide" style="background-image: url('3.jpg');"></div>


<div id="slide40" class="ps-slide" style="background-image: url('4.jpg');"></div>


<div id="slide50" class="ps-slide" style="background-image: url('5.jpg');"></div>

</div>
</div>

Cree una nueva instancia de slider con algunas opciones.

var ps = new PureSlider({



// options here


}
);

Inicialice el control deslizante y listo.

ps.init(document.querySelector('#mySlider'));

Todas las opciones predeterminadas para personalizar el deslizador/proyección de diapositivas.

var ps = new PureSlider({



// enable autoplay


autoplay: false,



// pause on hover


stopOnHover: true,



// transition delay in ms


laps: 3000,



// show navigation


showNav: true,



// show pagination


showBtn: true,



// or 'backward'


direction: 'forward',



 // CSS classes


currentCursorClassName: 'ps-current',


currentSlideClassName: 'ps-current',


slideClassName: 'ps-slide',


slidesClassName: 'ps-slides',


sliderNavClassName: 'ps-slider-nav',



// navigation options


prevBtnClassName: 'ps-left-nav-btn',


prevBtnHtml: 'prev',


nextBtnClassName: 'ps-right-nav-btn',


nextBtnHtml: 'next',





// callbacks


onBeforeSlideChangeCb: function () {


},


onAfterSlideChangeCb: function () {


},


onBeforeStartCb: function () {


},


onAfterStartCb: function () {


},


onBeforeStopCb: function () {


},


onAfterStopCb: function () {


},


onBeforeInitCb: function () {


},


onAfterInitCb: function () {


}



});