Carrusel de imágenes responsive en Vanilla JavaScript

Vista prévia

Descripción

A vanilla JavaScript library to create a fully-responsive, auto-rotating image carousel with custom caption titles and text.

Funcionamiento

Añade imágenes junto con subtítulos de imagen y controles por secuencia al carrusel.

<section id="slider" class="slider">

<div id="wrapper" class="slides-wrapper">



<div id="slide" class="slide" data-slide-id="0">





<img class="slide__img" src="1.jpg" alt="slider-0">





<div class="slide__caption">







<span class="slide__caption--title">Slide 1</span>







<span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span>





</div>



</div>



<div id="slide" class="slide" data-slide-id="1">





<img class="slide__img" src="2.jpg" alt="slider-1">





<div class="slide__caption">







<span class="slide__caption--title">Slide 2</span>







<span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span>





</div>



</div>



<div id="slide" class="slide" data-slide-id="2">





<img class="slide__img" src="https://images.unsplash.com/photo-1511431426884-c1525fc26c8a?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="slider-2">





<div class="slide__caption">







<span class="slide__caption--title">Slide 3</span>







<span class="slide__caption--text">3.jpg</span>





</div>



</div>



<div id="slide" class="slide" data-slide-id="3">





<img class="slide__img" src="4.jpg" alt="slider-3">





<div class="slide__caption">







<span class="slide__caption--title">Slide 4</span>







<span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span>





</div>



</div>

</div>


<a href="#" class="slider__btn slider__btn--prev" data-slide="prev">



<i class="fa fa-chevron-left" aria-hidden="true"></i>

</a>

<a href="#" class="slider__btn slider__btn--next" data-slide="next">



<i class="fa fa-chevron-right" aria-hidden="true"></i>

</a>


<div class="indicators">



<ul class="indicators__list">





<li class="indicators__item active" data-slide-to="0"></li>





<li class="indicators__item" data-slide-to="1"></li>





<li class="indicators__item" data-slide-to="2"></li>





<li class="indicators__item" data-slide-to="3"></li>



</ul>

</div>
</section>

En este ejemplo, debe cargar el Font awesome para los iconos de navegación.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Cargue los archivos JavaScript y CSS compilados en el documento. Hecho.

<link href="css/main.css" rel="stylesheet">
<script src="js/script-compiled.js"></script>