Carrusel de imágenes básicas con interacciones de ratón-Slider-Metallica

Vista prévia

Descripción

El plugin de JavaScript Slider-Metallica te permite crear un carrusel de imágenes básico en el que puedes cambiar de imagen con la rueda del ratón o haciendo clic en el borde de las imágenes.

Funcionamiento

Codicode el HTML para el carrusel del deslizador de imagen.

<div class="slider">

<div class="slider-content">


<img src="https://source.unsplash.com/600x450/?yoga" alt="">


<img src="https://source.unsplash.com/600x450/?woman" alt="">


<img src="https://source.unsplash.com/600x450/?girl" alt="">


<img src="https://source.unsplash.com/600x450/?body" alt="">


<div class="radio-buttons"></div>


<div class="prev-image"></div>


<div class="next-image"></div>

</div>
</div>

Los estilos CSS primarios para el carrusel de slider.

.slider {

text-align: center;
}

.slider-content {

display: inline-block;

position: relative;
}

.slider-content img:selected {

background-color: transparent;
}

.slider-content img {

display: none;

outline: none;
}

Estilo de los controles deslizantes.

.radio-buttons {

position: absolute;

bottom: 5px;

left: 0;

right: 0;

margin-right: auto;

margin-left: auto;
}

.radio-buttons input[type=radio] {

display: none;
}

.radio-buttons input[type=radio] + span {

width: 12px;

height: 12px;

display: inline-block;

border-radius: 50%;

background-color: #eee;

margin: 0 5px;

cursor: pointer;
}

.radio-buttons input[type=radio]:checked + span {

background-color: olivedrab;
}

.prev-image, .next-image {

position: absolute;

width: 50px;

height: 100%;

background-color: rgba(51, 51, 51, 0);

top: 0;
}

.prev-image:hover, .next-image:hover {

background-color: rgba(51, 51, 51, 0.4);
}

.prev-image {

left: 0;
}

.next-image {

right: 0;
}

Cargue el archivo de JavaScript Slider. js al final del documento. Hecho.

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