Últimos temas
header carrusel
Página 1 de 1. • Comparte
header carrusel
- Código:
.sp-slideshow { position: relative; margin: 15px auto; width: 900px; height: 400px;}
.sp-content {position: relative;width:900px;height: 400px;overflow: hidden;}
.sp-parallax-bg {background: url(http://placehold.it/900x400) repeat-x scroll 0 0;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.sp-slideshow input {position: absolute;bottom: 15px;left: 50%;width: 9px;height: 9px;z-index: 999;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}
.sp-selector-1, .button-label-1 {margin-left: -36px;}
.sp-selector-2, .button-label-2 {margin-left: -18px;}
.sp-selector-3, .button-label-3 {margin-left: 0px;}
.sp-selector-4, .button-label-4 {margin-left: 18px;}
.sp-selector-5, .button-label-5 {margin-left: 36px;}
.sp-arrow {position: absolute;top: 50%;width: 28px;height: 38px;margin-top: -19px;display: none;opacity: 0.8;cursor: pointer;z-index: 999;background: transparent url(http://i.imgur.com/eYUSsIS.png) no-repeat;-webkit-transition: opacity linear 0.3s;-moz-transition: opacity linear 0.3s;-o-transition: opacity linear 0.3s;-ms-transition: opacity linear 0.3s;
transition: opacity linear 0.3s;}
.sp-arrow:hover{opacity: 1;}
.sp-arrow:active{margin-top: -18px;}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {right: 15px;display: block;background-position: top right;}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {left: 15px;display: block;background-position: top left;}
.sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;}
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}
input.sp-selector-1:checked ~ .sp-content {background-position: 0 0;background-color: #727b7f;}
input.sp-selector-2:checked ~ .sp-content {background-position: -100px 0; background-color:#7f7276;}
input.sp-selector-3:checked ~ .sp-content {background-position: -200px 0;background-color: #737f72;}
input.sp-selector-4:checked ~ .sp-content {background-position: -300px 0;background-color: #79727f;}
input.sp-selector-5:checked ~ .sp-content {background-position: -400px 0;background-color: #7d7f72;}
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
.sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; }
.sp-slider > li {
height:100%;
padding:0 60px;
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float:left;
text-align:center;
opacity:0.4;
-webkit-transition:opacity ease-in 0.4s 0.8s;
-moz-transition:opacity ease-in 0.4s 0.8s;
-o-transition:opacity ease-in 0.4s 0.8s;
-ms-transition:opacity ease-in 0.4s 0.8s;
transition:opacity ease-in 0.4s 0.8s; }
.sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0 auto;padding: 40px 0 50px 0;max-height: 100%;max-width: 100%;}
input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;}
input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;}
input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;}
input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;}
input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){ opacity: 1; list-style: none;}
@media screen and (max-width: 840px){
.sp-slideshow { height: 345px; }
}
@media screen and (max-width: 680px){
.sp-slideshow { height: 285px; }
}
@media screen and (max-width: 560px){
.sp-slideshow { height: 235px; }
}
@media screen and (max-width: 320px){
.sp-slideshow { height: 158px; }
}
#page-header .navbar {
top: 44px;
position: absolute;
}
- Código:
<div class="sp-slideshow">
<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" /> <label for="button-1" class="button-label-1"></label> <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" /> <label for="button-2" class="button-label-2"></label> <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> <label for="button-3" class="button-label-3"></label> <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> <label for="button-4" class="button-label-4"></label> <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" /> <label for="button-5" class="button-label-5"></label> <label for="button-1" class="sp-arrow sp-a1"></label> <label for="button-2" class="sp-arrow sp-a2"></label> <label for="button-3" class="sp-arrow sp-a3"></label> <label for="button-4" class="sp-arrow sp-a4"></label> <label for="button-5" class="sp-arrow sp-a5"></label>
<div class="sp-content">
<div class="sp-parallax-bg">
</div>
<ul class="sp-slider clearfix">
<li>
<div style="width:800px; height:350px;">
SLIDE CONTENT HERE
</div>
</li>
<li>
<div style="width:800px; height:350px;">
SLIDE CONTENT HERE
</div>
</li>
<li>
<div style="width:800px; height:350px;">
SLIDE CONTENT HERE
</div>
</li>
<li>
<div style="width:800px; height:350px;">
SLIDE CONTENT HERE
</div>
</li>
<li>
<div style="width:800px; height:350px;">
SLIDE CONTENT HERE
</div>
</li>
</ul>
</div>
</div>
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|
Sáb Jul 09, 2016 10:21 pm por Admin
» foro de prueba
Miér Mar 09, 2016 5:49 pm por Admin
» header carrusel
Miér Mar 09, 2016 12:36 am por Admin
» Tablillas!!!
Vie Ene 22, 2016 4:12 pm por Devisser Groen
» hoveeeeeeeeer
Lun Ene 11, 2016 12:17 am por Admin
» Codigos!!!!!
Lun Ene 04, 2016 4:24 pm por Devisser Groen
» Tu primer tema
Jue Dic 17, 2015 4:32 pm por Admin