El deslizador de carrusel de imágenes de CSS puro

Vista prévia

Descripción

Un deslizador de carrusel de imagen de fondo CSS puro con un efecto de transición crossfade creado con transiciones HTML, CSS y CSS3 & transforma.

Funcionamiento

Compile la estructura de marcado para el deslizador de carrusel de imágenes.

<div class="carousel-wrapper">


 <span id="target-item-1"></span>

<span id="target-item-2"></span>

<span id="target-item-3"></span>

<span id="target-item-4"></span>

<span id="target-item-5"></span>



<!-- Start carousel items-->

<div class="carousel-item item-1">


<h2>Item 2</h2>


<p>Content goes here.</p>


<a class="arrow arrow-prev" href="#target-item-3"></a>


<a class="arrow arrow-next" href="#target-item-2"></a>

</div>


<div class="carousel-item item-2">


<h2>Item 2</h2>


<p>Content goes here.</p>


<a class="arrow arrow-prev" href="#target-item-1"></a>


<a class="arrow arrow-next" href="#target-item-3"></a>

</div>


<div class="carousel-item item-3">


<h2>Item 3</h2>


<p>Content goes here.</p>


<a class="arrow arrow-prev" href="#target-item-2"></a>


<a class="arrow arrow-next" href="#target-item-4"></a>

</div>


<div class="carousel-item item-4">


<h2>Item 4</h2>


<p>Content goes here.</p>


<a class="arrow arrow-prev" href="#target-item-3"></a>


<a class="arrow arrow-next" href="#target-item-5"></a>

</div>


<div class="carousel-item item-5">


<h2>Item 5</h2>


<p>Content goes here.</p>


<a class="arrow arrow-prev" href="#target-item-4"></a>


<a class="arrow arrow-next" href="#target-item-1"></a>

</div>


</div>

Las reglas básicas de estilo CSS/CSS3.

.carousel-wrapper {

position: relative;

height: 307px;

width: 760px;

margin: auto;
}

.carousel-wrapper .carousel-item {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

padding: 25px 50px;

opacity: 0;

transition: all 0.5s ease-in-out;

border-radius: 10px;
}

.carousel-wrapper [id^="target-item"] {

display: none;
}

.carousel-wrapper *:target ~ .item-1 {

opacity: 0;
}

.carousel-wrapper #target-item-1:target ~ .item-1 {

opacity: 1;
}

.carousel-wrapper #target-item-2:target ~ .item-2, .carousel-wrapper #target-item-3:target ~ .item-3, .carousel-wrapper #target-item-4:target ~ .item-4, .carousel-wrapper #target-item-5:target ~ .item-5 {

z-index: 3;

opacity: 1;
}

.carousel-wrapper img {

max-width: 100%;
}

Estilo & colocar las flechas de navegación.

.carousel-wrapper .carousel-item .arrow {

position: absolute;

top: 0;

display: block;

width: 50px;

height: 100%;

-webkit-tap-highlight-color: transparent;

background: url("../images/left-arrow.png") 50% 50%/50px no-repeat;
}

.carousel-wrapper .carousel-item .arrow.arrow-prev {

left: 10px;
}

.carousel-wrapper .carousel-item .arrow.arrow-next {

right: 10px;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);
}

Haga que responda mediante consultas de medios CSS3.

@media (max-width: 480px) {

.carousel-wrapper .carousel-item .arrow, .carousel-wrapper .carousel-item.light .arrow {


background-size: 75%;


background-position: 10px 50%;

}
}

@media only screen and (max-width: 760px) {

.carousel-wrapper {


width: 100%;

}
}

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

.carousel-wrapper .item-1 {

z-index: 2;

opacity: 1;

background: url("1.jpg") no-repeat scroll 100%;
}

.carousel-wrapper .item-2 {

background: url("2.jpg") no-repeat scroll 100%;
}

.carousel-wrapper .item-3 {

background: url("3.jpg") no-repeat scroll 100%;
}

.carousel-wrapper .item-4 {

background: url("4.jpg") no-repeat scroll 100%;
}

.carousel-wrapper .item-5 {

background: url("5.jpg") no-repeat scroll 100%;
}