Slider-pliego en puro CSS3
Slider-pliego CSS3 Le permitirá realizar Su sueño de ser simple y de fácil slider acordeón, que fácilmente Se vaya a utilizar en Su sitio web. Lo he implementado en el sitio web de mi cliente. Se puede ver aquí. Vieron? Ahora vamos a lo hagamos.
Es nuestro diagramación. Tenga en cuenta que es necesario cambiar los enlaces a las imágenes. Nada de extraño en que el texto no. Lo más interesante se encuentra en el CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="accordian"> <ul> <!-- El elemento del slider --> <li> <div class="image_title"> <a href="#">El elemento del slider<br><span>El elemento del slider</span></a> </div> <a href="#"> <img src="#"> </a> </li> <!-- El elemento del slider --> <li> <div class="image_title"> <a href="#">El elemento del slider</a> </div> <a href="#"> <img src="#"> </a> </li> <!-- El elemento del slider --> <li> <div class="image_title"> <a href="#">El elemento del slider</a> </div> <a href="#"> <img src="#"> </a> </li> </ul> </div> |
Eso es CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.accordian { width: 990px; height: 375px; overflow: hidden; margin: 20px auto; -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*Un pequeño truco para evitar el parpadeo en algunos navegadores*/ .accordian ul { width: 2000px; padding: 0; margin: 0; } .accordian li { position: relative; display: block; width: 247px; float: left; border-left: 1px solid #888; /* La creación de la sombra */ -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /* Creación de una animación con la ayuda de navegación */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } /* Reducir el ancho para algunos inactivos imágenes */ .accordian ul:hover li { width: 80px; } /* El trabajo de la anchura de la imagen al ofrecer a ella el cursor */ /* Este estilo ( li:hover), que reemplaza ul: hover */ .accordian ul li:hover { width: 750px; } .accordian li img { display: block; width: 750px; } /* Estilo para el bloque que contiene el vínculo */ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 750px; } /* Estilo para los enlaces */ .image_title a { display: block; color: #fff; font-weight: 200; text-decoration: none; padding: 20px; font-size: 24px; } .image_title a span { font-size: 18px; } |
Las dimensiones de slider
Un poco de los comentarios. Este slider he hecho bajo las siguientes dimensiones.
- La anchura del slider: 990px.
- El ancho de cada slider: 750px.
- El ancho de cada slider en forma cerrada – 247px.
Todas las dimensiones hay en el CSS. Todo se puede cambiar. Por lo tanto, experimenta, y si tienen preguntas, preguntar debajo de este artículo. Esperamos que Te guste este slider
Contact Us
You are used to see a contact form here. Almost everyone does it. But while examining the behavior of people, we came to the conclusion that the form is completely unnecessary. In any case, it all comes down to discuss your project on WhatsApp. Why should we waste your time filling out various forms?