HTML puro/CSS responsive Carousel-Cari

Vista prévia

Descripción

Cari es una solución HTML/CSS pura para hacer un deslizador de carrusel de contenido receptivo sin la necesidad de ningún JavaScript.

Funcionamiento

Compile la estructura de marcas para crear un carrusel de contenedor con la navegación siguiente/anterior.

<div class="carousel-wrapper">

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

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

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

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


<h2>Item 1</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 light">


<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-1"></a>

</div>
</div>

Los estilos CSS principales para habilitar el carrusel.

.carousel-wrapper { position: relative; }

.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;
}

.carousel-wrapper .carousel-item .arrow {

position: absolute;

top: 0;

display: block;

width: 50px;

height: 100%;

-webkit-tap-highlight-color: transparent;

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

.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; }

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

right: 0;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);
}

.carousel-wrapper .carousel-item.light { color: white; }

.carousel-wrapper .carousel-item.light .arrow { background: url("../arrow.png") 50% 50%/20px no-repeat; }

.carousel-wrapper [id^="target-item"] { display: none; }

.carousel-wrapper .item-1 {

z-index: 2;

opacity: 1;

background-color: #009CE0;
}

.carousel-wrapper .item-2 { background-color: #0277BD; }

.carousel-wrapper .item-3 {

background: url("../blurry.jpg") no-repeat;

background-size: cover;
}

.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 {

z-index: 3;

opacity: 1;
}

Haga que el carrusel responda mediante consultas de medios CSS3.

@media (max-width: 480px) {

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

background-size: 10px;

background-position: 10px 50%;
}

}