Simple Touch-Enabled biblioteca JavaScript carrusel-VN carrusel

Vista prévia

Descripción

VN Carousel is a simple, pure JavaScript library for creating a full-width, responsive, touch-enabled carousel slider. It allows you to navigate between slides through touch swipe, mouse drag, dots navigation or click on the most closed sibling slides.

¿Cómo funciona?

Cargue la biblioteca JavaScript del carrusel de vn en la parte inferior de su página web.

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

Cargue el Hammer. js requerido para la compatibilidad con eventos táctiles.

<script src="js/hammer.min.js"></script>

Añade diapositivas y controles por secuencia al deslizador de carrusel.

<div class="js-carousel">

<div class="js-carousel-slides-wrapper">


<div>



<div class="slide-wrapper" style=





"background-image: url(images/01.jpg)"> </div>


</div>


<div>



<div class="slide-wrapper" style=





"background-image: url(images/02.jpg)"> </div>


</div>


<div>



<div class="slide-wrapper" style=





"background-image: url(images/03.jpg)"> </div>


</div>

</div>

<button class="carousel-arrow carousel-arrow-prev js-carousel-prev">previous</button>

<button class="carousel-arrow carousel-arrow-next js-carousel-next">next</button>

<div class="carousel-pagination js-carousel-pagination"></div>
</div>

Los estilos CSS básicos para el deslizador de carrusel.

.carousel { overflow: hidden; }

.carousel-slides-wrapper,
.carousel-slide { will-change: transform, opacity; }

.carousel-slides-wrapper:after {

content: " ";

display: table;

clear: both;
}

.carousel-slide { float: left; }

.carousel-pagination-item {

position: relative;

width: 1.25rem;

height: 1.25rem;

display: inline-block;

border: 0;

padding: 0;

background: transparent;

outline: 0;

-webkit-appearance: none;

appearance: none;
}

.carousel-pagination-item:after {

content: " ";

position: absolute;

top: 50%;

left: 50%;
 width: .375rem;
 height: .375rem;
 margin-left: -.1875rem;
 margin-top: -.1875rem;

background-color: #000;

border-radius: 50%;

opacity: .2;

transition: .3s;
}

.carousel-pagination-selected:after {

opacity: 1;

-webkit-transform: scale(1.75);

transform: scale(1.75);
}

.carousel-transition,
.carousel-transition .carousel-slide { transition: .5s; }

/* Example */


body { background-color: #222; }

.carousel {

position: relative;

margin: 2em 0;
}

.carousel-slide {

box-sizing: border-box;

-webkit-transform: scale(.9);

transform: scale(.9);

opacity: .5;
}

.slide-wrapper {

padding-top: 56.25%;

background-color: #111;

background-position: center center;

background-size: cover;

color: #333;

font-size: 20em;

text-align: center;
}

.carousel-slide-selected {

-webkit-transform: scale(1);

transform: scale(1);

opacity: 1;
}

.carousel-arrow {

position: absolute;

top: 0;

bottom: 0;

width: 10%;

border: 0;

opacity: .5;

background: transparent;

outline: 0;

text-indent: -9999px;

overflow: hidden;
}

.carousel-arrow-prev { left: 0; }

.carousel-arrow-next { right: 0; }

.carousel-pagination {

text-align: center;

margin-top: 1em;
}

.carousel-pagination-item:after { background-color: #ddd; }

Inicializa el deslizador de carrusel.

$myCarousel = document.querySelector('.js-carousel');

VNCarousel($myCarousel,{


// infinite loop

circular: true,


// CSS selector

slidesWrapper: '.js-carousel-slides-wrapper',

carouselPrev: '.js-carousel-prev',

carouselNext: '.js-carousel-next',

carouselPagination: '.js-carousel-pagination',


// // 0 to 20

peekingPercentage: 10


 });