Solo CSS presentación de imágenes de fundido cruzado

Vista prévia

Descripción

Una presentación de diapositivas de imagen sencilla implementada en CSS puro que permite al usuario alternar entre imágenes con un efecto de fundido cruzado basado en las propiedades de opacidad, transición y transformación de CSS.

Funcionamiento

Agregue tantas imágenes a la proyección de diapositivas siguiendo la estructura HTML como estas:

<div class="carousel">

<input type="radio" id="carousel-1" name="carousel" checked>

<input type="radio" id="carousel-2" name="carousel">

<input type="radio" id="carousel-3" name="carousel">

<input type="radio" id="carousel-4" name="carousel">

<input type="radio" id="carousel-5" name="carousel">

<ul class="carousel__items">



<li class="carousel__item"><img src="1.jpg" alt=""></li>



<li class="carousel__item"><img src="2.jpg" alt=""></li>



<li class="carousel__item"><img src="3.jpg" alt=""></li>



<li class="carousel__item"><img src="4.jpg" alt=""></li>



<li class="carousel__item"><img src="5.jpg" alt=""></li>

</ul>

<div class="carousel__prev">



<label for="carousel-1"></label>



<label for="carousel-2"></label>



<label for="carousel-3"></label>



<label for="carousel-4"></label>



<label for="carousel-5"></label>

</div>

<div class="carousel__next">



<label for="carousel-1"></label>



<label for="carousel-2"></label>



<label for="carousel-3"></label>



<label for="carousel-4"></label>



<label for="carousel-5"></label>

</div>

<div class="carousel__nav">



<label for="carousel-1"></label>



<label for="carousel-2"></label>



<label for="carousel-3"></label>



<label for="carousel-4"></label>



<label for="carousel-5"></label>

</div>
</div>

Los estilos CSS requeridos para la proyección de diapositivas. Simplemente copie e inserte los fragmentos de código CSS en su documento y el carrusel funcionará.

.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(5), .carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(1) {

opacity: 1 !important;

z-index: 3;
}

.carousel {

width: 100%;

position: relative;

overflow: hidden;
}

.carousel > input[type="radio"] {

position: absolute;

left: 0;

opacity: 0;

top: 0;
}

.carousel > input[type="radio"]:checked ~ .carousel__items .carousel__item, .carousel > input[type="radio"]:checked ~ .carousel__prev > label, .carousel > input[type="radio"]:checked ~ .carousel__next > label { opacity: 0; }

.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__items .carousel__item:nth-child(1) { opacity: 1; }

.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__nav > label:nth-child(1) {

background: #ccc;

cursor: default;

pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__items .carousel__item:nth-child(2) { opacity: 1; }

.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__nav > label:nth-child(2) {

background: #ccc;

cursor: default;

pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__items .carousel__item:nth-child(3) { opacity: 1; }

.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__nav > label:nth-child(3) {

background: #ccc;

cursor: default;

pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__items .carousel__item:nth-child(4) { opacity: 1; }

.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__nav > label:nth-child(4) {

background: #ccc;

cursor: default;

pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__items .carousel__item:nth-child(5) { opacity: 1; }

.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__nav > label:nth-child(5) {

background: #ccc;

cursor: default;

pointer-events: none;
}

.carousel__items {

margin: 0;

padding: 0;

list-style-type: none;

width: 100%;

height: 600px;

position: relative;
}

.carousel__item {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

-o-transition: opacity 2s;

transition: opacity 2s;

-webkit-transition: opacity 2s;
}

.carousel__item img {

width: 100%;

vertical-align: middle;
}

.carousel__prev > label, .carousel__next > label {

border: 1px solid #fff;

border-radius: 50%;

cursor: pointer;

display: block;

width: 40px;

height: 40px;

position: absolute;

top: 50%;

-ms-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-transform: translateY(-50%);

-o-transition: all .3s ease;

transition: all .3s ease;

-webkit-transition: all .3s ease;

opacity: 0;

z-index: 2;
}

.carousel__prev > label:hover, .carousel__prev > label:focus, .carousel__next > label:hover, .carousel__next > label:focus { opacity: .5 !important; }

.carousel__prev > label:before, .carousel__prev > label:after, .carousel__next > label:before, .carousel__next > label:after {

content: "";

position: absolute;

width: inherit;

height: inherit;
}

.carousel__prev > label:before, .carousel__next > label:before {

background: -webkit-gradient(linear, left bottom, left top, from(#fff), color-stop(10%, #fff), color-stop(10%, rgba(51, 51, 51, 0))),
-webkit-gradient(linear, right top, left top, from(#fff), color-stop(10%, #fff), color-stop(10%, rgba(51, 51, 51, 0)));

background: -webkit-linear-gradient(bottom, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%),
-webkit-linear-gradient(right, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);

background: -o-linear-gradient(bottom, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%),
-o-linear-gradient(right, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);

background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%),
linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);

width: 60%;

height: 60%;

top: 20%;
}

.carousel__prev > label { left: 2%; }

.carousel__prev > label:before {

left: 35%;

top: 20%;

-ms-transform: rotate(135deg);

transform: rotate(135deg);

-webkit-transform: rotate(135deg);
}

.carousel__next > label { right: 2%; }

.carousel__next > label:before {

left: 10%;

-ms-transform: rotate(315deg);

transform: rotate(315deg);

-webkit-transform: rotate(315deg);
}

.carousel__nav {

position: absolute;

bottom: 3%;

left: 0;

text-align: center;

width: 100%;

z-index: 3;
}

.carousel__nav > label {

border: 1px solid #fff;

display: inline-block;

border-radius: 50%;

cursor: pointer;

margin: 0 .125%;

width: 20px;

height: 20px;
}