Carrusel de paralaje responsivo en JavaScript puro-FG-Image-Slider

Vista prévia

Descripción

FG-Image-Slider es un plugin de secuencia JavaScript ligero y adaptable que soporta cualquier contenido web y viene con un efecto de paralaje al hacer la transición entre diapositivas.

Más características

• Autoplay.
• animaciones de desvanecimiento, escala, diapositiva y diapositivas.
• Velocidad de animación configurable.
• Viñetas de paginación.

Funcionamiento

Incluya la hoja de estilos ' Slider. css ' y JavaScript ' Slider. js ' en la Página Web.

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

Incluye el Font awesome para los íconos.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Añade tu propio contenido al carrusel.

<div class="fg-slider" id="slider-example">


<div class="fg-content text-center">


<p>Content 1</p>

</div>

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


<div class="fg-content text-center">


<p>Content 2</p>

</div>

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


<div class="fg-content text-center">


<p>Content 3</p>

</div>

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


...


</div>

Inicialice el carrusel con ajustes opcionales.

new FgSlider('slider-example', {


autoplay: true, // autoplay on / off


effect: 'slide', // fade, scale, slide, slide-top


duration: 5000, // duration till the next slide


bullets: true, // show / hide bullets
});