Deslizador de fondo personalizable/carrusel en JavaScript puro-gaBasicSlider

Vista prévia

Descripción

gaBasicSlider es un plugin de slider táctil, ligero, adaptable y personalizable que le permite deslizarse infinitamente a través de un grupo de imágenes de fondo con un sutil efecto de paralaje como se ve en la demo.

Nota: esta es la versión de JavaScript puro de jQuery gaBasicSlider plugin.

Funcionamiento

La estructura básica de HTML para el deslizador de fondo (puede ser estructuras div o UL).

<ul id="mySlider" class="my-slider">

<li style="background-image: url('1.jpg')">One</li>

<li style="background-image: url('2.jpg')">Two</li>

<li style="background-image: url('3.jpg')">Three</li>

<li style="background-image: url('4.jpg')">Four</li>

...
</ul>

Crear navegación personalizada & controles de paginación (opcional).

<button id="myPrevious">&larr;</button>
<button id="myNext">&rarr;</button>
<div id="myIndicators"></div>

Coloque el archivo JavaScript del gaBasicSlider al final del documento.

<script src="js/ga-basic-slider-min.js"></script>

Active el deslizador de fondo.

var params = {


slider: document.getElementById('mySlider'),


btnNext: document.getElementById('myNext'),


btnPrevious: document.getElementById('myPrevious'),


indicators: document.getElementById('myIndicators')
};

mySlider = new gaBasicSlider(params);

Más opciones de configuración.

var params = {


animate: true,


animationDelay: 6000, // milliseconds


animationDuration: 500 // milliseconds
};

API methods.

// starts auto rotation
mySlider.start()

// pauses auto rotation
mySlider.stop()