Elegante deslizador de acordeón con CSS puro

Vista prévia

Descripción

Descargue y ponga el archivo JavaScript "Calendar. js" en la parte inferior de la Página Web.

Funcionamiento

Descargue y ponga el archivo JavaScript "Calendar. js" en la parte inferior de la Página Web.

<div class="flexbox-slider my-flexbox-slider">


<div class="flexbox-slide">


<img src="1.jpg" alt="Slide Image">


<div class="text-block">



<h3>Slide #1 is here</h3>



<div class="text">




<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>



</div>


</div>

</div>

<div class="flexbox-slide">


<img src="2.jpg" alt="Slide Image">


<div class="text-block">



<h3>Slide #2 is here</h3>



<div class="text">




<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>



</div>


</div>

</div>

<div class="flexbox-slide">


<img src="3.jpg" alt="Slide Image">


<div class="text-block">



<h3>Slide #3 is here</h3>



<div class="text">




<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>



</div>


</div>

</div>


...

</div>

Las reglas principales de CSS/CSS3 para el deslizador de acordeón.

.flexbox-slider {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

width: 100%;

height: 500px;

visibility: hidden;
}

.flexbox-slider .flexbox-slide {

-webkit-transition-property: all;

transition-property: all;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: linear;

transition-timing-function: linear;

-webkit-transition-delay: 0s;

transition-delay: 0s;

width: 20%;

height: 100%;

position: relative;

overflow: hidden;

cursor: pointer;

visibility: visible;
}

.flexbox-slider .flexbox-slide:after {

position: absolute;

top: 0;

left: 0;

content: "";

display: block;

width: 100%;

height: 100%;

background-color: rgba(255, 255, 255, 0.6);

z-index: 2;

opacity: 0;
}

.flexbox-slider .flexbox-slide img {

position: absolute;

top: 50%;

left: 50%;

height: auto;

width: auto;

min-width: 100%;

min-height: 100%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

z-index: 1;
}

.flexbox-slider .flexbox-slide .text-block {

position: absolute;

left: 30px;

bottom: 30px;

max-width: 400px;

padding: 20px;

border-radius: 5px;

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

color: #fff;

z-index: 4;

visibility: hidden;
}

.flexbox-slider .flexbox-slide .text-block h3 {

font-size: 20px;

font-weight: 700;
}

.flexbox-slider:hover .flexbox-slide:hover {

-ms-flex-negative: 0;

flex-shrink: 0;

width: 80%;
}

Aplique su propio efecto de transición CSS al deslizador de acordeón.

.flexbox-slider.flexbox-slider-demo .flexbox-slide .text-block { bottom: 60px; }

.flexbox-slider.flexbox-slider-demo:hover .flexbox-slide:hover .text-block {

-webkit-transition-property: all;

transition-property: all;

-webkit-transition-duration: 0.2s;

transition-duration: 0.2s;

-webkit-transition-timing-function: linear;

transition-timing-function: linear;

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

bottom: 30px;

opacity: 1;

visibility: visible;
}