Deslizador de carrusel adaptable en Vanilla JavaScript

Vista prévia

Descripción

Un deslizador/carrusel de imagen simple, receptivo y reutilizable construido usando JavaScript puro de vainilla y un poco de magia CSS3.

Funcionamiento

Inserte las imágenes en el deslizador de carrusel utilizando Data-src Attribute en lugar de IMG src . También puede incrustar imágenes como fondo en el CSS.

<div class="demo" data-show-index="1">



<!-- Carousel -->

<div class="carousel-main carousel-main--1" data-slide-index="2">



<!-- Slides -->



<div class="carousel-item" data-slide-index="0" data-src="1.jpg"></div>



<div class="carousel-item" data-slide-index="1" data-src="2.jpg"></div>



<div class="carousel-item" data-slide-index="2" data-src="3.jpg"></div>



<div class="carousel-item" data-slide-index="3" data-src="4.jpg"></div>




<!-- Controls -->



<button class="carousel-btn" data-dir="_L"></button>



<button class="carousel-btn" data-dir="_R"></button>




<!-- Dots -->



<div class="carousel-dots">





<div class="carousel-dot" data-slide-index="0"></div>





<div class="carousel-dot" data-slide-index="1"></div>





<div class="carousel-dot" data-slide-index="2"></div>





<div class="carousel-dot" data-slide-index="3"></div>



</div>

</div>

</div>

Los estilos CSS requeridos para el diseño básico de carrusel.

.carousel-main {

position: absolute;

top: 20%;

left: 20%;

bottom: 20%;

right: 20%;

overflow: hidden;

background-color: red;
}

.carousel-item {

position: absolute;

width: 100%;

height: 100%;

top: 0;

opacity: 0;
}

.carousel-item { background-size: cover; }

.carousel-item[data-slide-index="0"] { background-image: url(1.jpg); }

.carousel-item[data-slide-index="1"] { background-image: url(2.jpg); }

.carousel-item[data-slide-index="2"] { background-image: url(3.jpg); }

.carousel-item[data-slide-index="3"] { background-image: url(4.jpg); }

Estilo de los puntos de navegación y botones.

/*

Buttons

*/

.carousel-btn {

position: absolute;

top: 0;

bottom: 0;

width: 3em;

background: rgba(0,0,0,0.5);

outline: 0;

border: 0;
}

.carousel-btn[data-dir="_L"] { left: 0; }

.carousel-btn[data-dir="_R"] { right: 0; }

.carousel-btn[data-dir="_L"]:after,
.carousel-btn[data-dir="_R"]:after {

content: '';

width: 2em;

height: 2em;

position: absolute;

margin-top: -1em;

transform: rotate(45deg);
}

.carousel-btn[data-dir="_L"]:after {

border-left: 0.5em solid red;

border-bottom: 0.5em solid red;

left: 1em;
}

.carousel-btn[data-dir="_R"]:after {

border-right: 0.5em solid red;

border-top: 0.5em solid red;

right: 1em;
}

/*

Dots

*/

.carousel-dots {

position: absolute;

bottom: 0;

left: 0;

right: 0;

height: 2em;

text-align: center;
}

.carousel-dot {

display: inline-block;

width: 1em;

height: 1em;

border-radius: 50%;

background: black;

margin: 0 0.5em;

position: relative;

top: 0.5em;

transition: all 0.4s ease-out 0s;

transform: scale(1);
}

.carousel-dot.active {

background: red;

transform: scale(1.2);
}

Añade efectos de transición suaves al carrusel con CSS3.

.carousel-item.active,
.carousel-item.prev,
.carousel-item.next {

opacity: 1;

animation-duration: 0.5s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

animation-iteration-count: 1;

animation-delay: 0s;
}

/* slide("_R") */
@keyframes
 slideLeftOut {
0% {
transform: translateX(0%);
}
 100% {
transform: translateX(-100%);
}
}

@keyframes
 slideRightIn {
0% {
transform: translateX(100%);
}
 100% {
transform: translateX(0%);
}
}

.carousel-item.prev { animation-name: slideLeftOut; }

.carousel-item.active.next { animation-name: slideRightIn; }

/* slide("_L") */
@keyframes
 slideRightOut {
0% {
transform: translateX(0%);
}
 100% {
transform: translateX(100%);
}
}

@keyframes
 slideLeftIn {
0% {
transform: translateX(-100%);
}
 100% {
transform: translateX(0%);
}
}

Cargue el archivo JavaScript principal en la parte inferior del documento.

<script src="js/main.js"></script>

Activa el deslizador del carrusel.

if (document.readyState != 'loading'){

main();
} else {

document.addEventListener('DOMContentLoaded', main);
}