Pure CSS Carousel/Slidershow

Vista prévia

Descripción

Un carrusel CSS puro que permite al usuario deslizarse/desvanecerse a través de un grupo de imágenes de fondo utilizando transiciones, transformaciones y animaciones CSS3. El completo < a href = "https:/medium.com/@ _jh3y/how-to-pure-css-carousel-ce1a8cb231c8 #. 6iq6vp4nw" > tutorial .

Funcionamiento

La estructura básica de HTML para el carrusel.

<ul class="carousel my-carousel">

<input type="radio" id="1" name="activator" checked="checked" class="carousel__activator"/>

<input type="radio" id="2" name="activator" class="carousel__activator"/>

<input type="radio" id="3" name="activator" class="carousel__activator"/>

<input type="radio" id="4" name="activator" class="carousel__activator"/>

<input type="radio" id="5" name="activator" class="carousel__activator"/>

<div class="carousel__controls">


<label for="2" class="carousel__control carousel__control--backward"></label>


<label for="5" class="carousel__control carousel__control--forward"></label>

</div>

<div class="carousel__controls">


<label for="3" class="carousel__control carousel__control--backward"></label>


<label for="1" class="carousel__control carousel__control--forward"></label>

</div>

<div class="carousel__controls">


<label for="4" class="carousel__control carousel__control--backward"></label>


<label for="2" class="carousel__control carousel__control--forward"></label>

</div>

<div class="carousel__controls">


<label for="5" class="carousel__control carousel__control--backward"></label>


<label for="3" class="carousel__control carousel__control--forward"></label>

</div>

<div class="carousel__controls">


<label for="1" class="carousel__control carousel__control--backward"></label>


<label for="4" class="carousel__control carousel__control--forward"></label>

</div>

<li class="carousel__slide">


<h1>1</h1>

</li>

<li class="carousel__slide">


<h1>2</h1>

</li>

<li class="carousel__slide">


<h1>3</h1>

</li>

<li class="carousel__slide">


<h1>4</h1>

</li>

<li class="carousel__slide">


<h1>5</h1>

</li>

<div class="carousel__indicators">


<label for="1" class="carousel__indicator"></label>


<label for="2" class="carousel__indicator"></label>


<label for="3" class="carousel__indicator"></label>


<label for="4" class="carousel__indicator"></label>


<label for="5" class="carousel__indicator"></label>

</div>
</ul>

Los estilos primarios CSS/CSS3.

.carousel {

height: 300px;

width: 400px;

overflow: hidden;

text-align: center;

position: relative;

padding: 0;
}

.carousel__controls, .carousel__slide, .carousel__activator { display: none; }

.carousel__activator:nth-of-type(5):checked ~ .carousel__track {

-webkit-transform: translateX(-400%);

transform: translateX(-400%);
}

.carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(5) {

-webkit-animation: carousel-show-slide 0.5s;

animation: carousel-show-slide 0.5s;

display: block;
}

.carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) { display: block; }

.carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) { opacity: 1; }

.carousel__activator:nth-of-type(4):checked ~ .carousel__track {

-webkit-transform: translateX(-300%);

transform: translateX(-300%);
}

.carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) {

-webkit-animation: carousel-show-slide 0.5s;

animation: carousel-show-slide 0.5s;

display: block;
}

.carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) { display: block; }

.carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) { opacity: 1; }

.carousel__activator:nth-of-type(3):checked ~ .carousel__track {

-webkit-transform: translateX(-200%);

transform: translateX(-200%);
}

.carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {

-webkit-animation: carousel-show-slide 0.5s;

animation: carousel-show-slide 0.5s;

display: block;
}

.carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) { display: block; }

.carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) { opacity: 1; }

.carousel__activator:nth-of-type(2):checked ~ .carousel__track {

-webkit-transform: translateX(-100%);

transform: translateX(-100%);
}

.carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {

-webkit-animation: carousel-show-slide 0.5s;

animation: carousel-show-slide 0.5s;

display: block;
}

.carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) { display: block; }

.carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) { opacity: 1; }

.carousel__activator:nth-of-type(1):checked ~ .carousel__track {

-webkit-transform: translateX(0%);

transform: translateX(0%);
}

.carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {

-webkit-animation: carousel-show-slide 0.5s;

animation: carousel-show-slide 0.5s;

display: block;
}

.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) { display: block; }

.carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) { opacity: 1; }

.carousel__control {

height: 30px;

width: 30px;

margin-top: -15px;

top: 50%;

position: absolute;

display: block;

cursor: pointer;

border-width: 5px 5px 0 0;

border-style: solid;

border-color: #fafafa;

opacity: 0.35;

outline: 0;

z-index: 3;
}

.carousel__control:hover { opacity: 1; }

.carousel__control--forward {

left: 10px;

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

transform: rotate(-135deg);
}

.carousel__control--backward {

right: 10px;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);
}

.carousel__indicators {

position: absolute;

bottom: 20px;

width: 100%;

text-align: center;
}

.carousel__indicator {

height: 15px;

width: 15px;

border-radius: 100%;

display: inline-block;

z-index: 2;

cursor: pointer;

opacity: 0.35;

margin: 0 2.5px 0 2.5px;
}

.carousel__indicator:hover { opacity: 0.75; }

.carousel__track {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

-webkit-transition: -webkit-transform 0.5s ease 0s;

transition: -webkit-transform 0.5s ease 0s;

transition: transform 0.5s ease 0s;

transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
}

.carousel__track .carousel__slide { display: block; }

.carousel__track .carousel__slide:nth-of-type(1) {

-webkit-transform: translateX(0%);

transform: translateX(0%);
}

.carousel__track .carousel__slide:nth-of-type(2) {

-webkit-transform: translateX(100%);

transform: translateX(100%);
}

.carousel__track .carousel__slide:nth-of-type(3) {

-webkit-transform: translateX(200%);

transform: translateX(200%);
}

.carousel__track .carousel__slide:nth-of-type(4) {

-webkit-transform: translateX(300%);

transform: translateX(300%);
}

.carousel__track .carousel__slide:nth-of-type(5) {

-webkit-transform: translateX(400%);

transform: translateX(400%);
}

.carousel__slide {

height: 100%;

right: 0;

position: absolute;

overflow-y: auto;

top: 0;

left: 0;
}

.carousel__slide {

border-radius: 10px;

overflow: hidden;
}

.carousel__indicator { background-color: #fafafa; }

@-webkit-keyframes
 carousel-show-slide {
from {
 opacity: 0;
}

to { opacity: 1; }
}

@keyframes
 carousel-show-slide {
from {
 opacity: 0;
}

to { opacity: 1; }
}

Añada imágenes de fondo a las diapositivas.

.carousel__slide:nth-of-type(1) {

background-image: url("1.jpg");

background-size: cover;

background-position: center;
}

.carousel__slide:nth-of-type(2) {

background-image: url("2.jpg");

background-size: cover;

background-position: center;
}

.carousel__slide:nth-of-type(3) {

background-image: url("3.jpg");

background-size: cover;

background-position: center;
}

.carousel__slide:nth-of-type(4) {

background-image: url("4.jpg");

background-size: cover;

background-position: center;
}

.carousel__slide:nth-of-type(5) {

background-image: url("5.jpg");

background-size: cover;

background-position: center;
}

11