Super Tiny Carousel en Vanilla JavaScript-Lite Carousel

Vista prévia

Descripción

Lite Carousel es una librería por secuencia de JavaScript muy ligera y de dependencia cero que utiliza el método requestAnimationFrame () para proporcionar un efecto de transición rápido y fluido entre diapositivas.

Funcionamiento

Añade diapositivas personalizadas y botones siguiente/anterior al carrusel.

<div id="lite-carousel">

<div id="prev"><</div>

<div class="viewport">


<ul>



<li><img src="1.jpg"><span>Item 1</span></li>



<li><img src="2.jpg"><span>Item 2</span></li>



<li><img src="3.jpg"><span>Item 3</span></li>


</ul>

</div>

<div id="next">></div>
</div>

Cargue el archivo JavaScript principal al final del documento.

<script src="lite-carousel.min.js"></script>

El principal JavaScript para activar el carrusel.

//For Left Click action:-
document.getElementById('prev').addEventListener("click",function(){

var delay = 500;
//Animation slide time in milliseconds

var ul_selector = '#lite-carousel ul';
//Pass the ul selector as input

 var position = 'Left';

CircularCarousel.shiftCarousel(position,ul_selector,delay);
});

//For Right Click action:-
document.getElementById('next').addEventListener("click",function(){

var delay = 500;
//Animation slide time in milliseconds

var ul_selector = '#lite-carousel ul';
//Pass the ul selector as input

 var position = 'Right';

CircularCarousel.shiftCarousel(position,ul_selector,delay);
});

El CSS de muestra para el estilo del carrusel.

img {

width: 200px;

height: 100px;
}

span {

position: absolute;

top: 39px;

left: 81px;
}

ul {

width: 300%;

position: absolute;

padding: 0px;
}

div.viewport {

overflow: hidden;

width: 203px;

height: 117px;

position: relative;

margin-left: 15px;
}

li {

list-style: none;

position: relative;

float: left;

margin-left: 3px;
}

div#lite-carousel {

overflow: hidden;

position: relative;

margin-left: 39%;
}

div#prev {

position: absolute;

cursor: pointer;

top: 54px;

font-weight: bold;
}

div#next {

position: absolute;

cursor: pointer;

left: 226px;

top: 54px;

font-weight: bold;
}