Responsive Carousel plugin in Pure JavaScript-Tour. js

Vista prévia

Descripción

Tour. js es un plugin de carrusel fácil y receptivo que cuenta con reproducción automática (con una barra de progreso), redimensionamiento automático y paginación/navegación personalizada.

Funcionamiento

Cargue el Tour. CSS y el Tour. js en el archivo HTML como este:

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

Agregue las diapositivas junto con los controles al contenedor de carrusel.

<div class="tour slide">

<!-- Indicators -->

<ol class="tour-indicators">

<li class="active"></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ol>


<!-- Wrapper for slides -->

<div class="tour-inner" role="listbox">



<div class="item active">



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



<div class="tour-caption">




<h2>Slide 1</p>



</div>


</div>



<div class="item">



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



<div class="tour-caption">




<h2>Slide 2</p>



</div>


</div>



<div class="item">



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



<div class="tour-caption">




<h2>Slide 3</p>



</div>


</div>





<div class="item">



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



<div class="tour-caption">




<h2>Slide 4</p>



</div>


</div>



<div class="item">



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



<div class="tour-caption">




<h2>Slide 5</p>



</div>


</div>

</div>





<!-- Controls -->

<a class="left tour-control" role="button" data-slide="prev">

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

</a>

<a class="right tour-control" role="button" data-slide="next">


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

</a>
</div>

Active el carrusel con la siguiente sintaxis JS.

document.addEventListener('DOMContentLoaded', function (){
document.removeEventListener('DOMContentLoaded', arguments.calee);

tour('.tour').apply();
});

Para personalizar el carrusel, simplemente pase las siguientes opciones un objeto al método ' Apply () '.

tour('.tour').apply({


// in milliseconds

"delay": 6000,


// enable autoplay

"startCycle": true,


// shows navigation arrows

"showArrows": true,


// 'sliding', 'fading', 'rolling'

"slideEffect": 'sliding',


 /*


{



"element": will return the current element,



"next": function can be execut to go to the next slide,



"prev": the previous of next function,



"indeicators": will return the current element indeicator's elements



"transition": Here you can see or change your slide transition in respect of 3 slide transition effects explained above.


};

*/

"returnAPI": false


});