El deslizador de imagen adaptable basado en Flexbox

Vista prévia

Descripción

Un deslizador de imagen simple, totalmente receptivo construido usando JavaScript y CSS Flexbox.

Funcionamiento

Agregue un grupo de imágenes al control deslizante.

<div class="slider">

<img class="active" src="1.jpg">

<img src="2.jpg">

<img src="3.jpg">

...
</div>

Cree una navegación deslizante para alternar entre las imágenes.

<nav class="slider-nav">

<ul>


<li class="arrow">



<a class="previous">




<span>





<




</span>



</a>


</li>


<li class="arrow">



<a class="next">




<span>





>




</span>



</a>


</li>

</ul>
</nav>

El CSS principal para el deslizador de imagen.

.slider-nav ul {

list-style: none;

margin: 0;

padding: 0;

display: -webkit-box;

display: flex;

-webkit-box-pack: center;

justify-content: center;
}

.slider-nav li {

-webkit-box-flex: 2;

flex: 2;

text-align: center;

display: -webkit-box;

display: flex;
}

img {

max-width: 100%;

display: none;

-webkit-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);

-moz-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);

box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
}

img.active {

display: block;

-webkit-animation: fadeImg 0.8s;

-moz-animation: fadeImg 0.8s;

animation: fadeImg 0.8s;
}

.slider-nav .arrow { flex: 0 0 15%; }

.slider-nav a {

flex-basis: 100%;

display: -webkit-box;

display: flex;

-webkit-box-align: center;

align-items: center;
}

.slider-nav span {

display: block;

width: 100%;
}

Aplique un efecto de desvanecimiento a las imágenes al cambiar.

@-webkit-keyframes
 fadeImg {
from {
 opacity: 0;
}

to { opacity: 1; }
}

@-moz-keyframes
 fadeImg {
from {
 opacity: 0;
}

to { opacity: 1; }
}

@keyframes
 fadeImg {
from {
 opacity: 0;
}

to { opacity: 1; }
}

El principal JavaScript para activar el deslizador de imagen.

const items = document.querySelectorAll('img');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
let count = 0;

function showNextItem() {

items[count].classList.remove('active');


if(count < itemCount - 1) {


count++;

} else {


count = 0;

}


items[count].classList.add('active');

console.log(count);
}

function showPreviousItem() {

items[count].classList.remove('active');


if(count > 0) {


count--;

} else {


count = itemCount - 1;

}


items[count].classList.add('active');

console.log(count);
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);