Últimos temas
» firmitaparadave
header carrusel EmptySáb Jul 09, 2016 10:21 pm por Admin

» foro de prueba
header carrusel EmptyMiér Mar 09, 2016 5:49 pm por Admin

» header carrusel
header carrusel EmptyMiér Mar 09, 2016 12:36 am por Admin

» Tablillas!!!
header carrusel EmptyVie Ene 22, 2016 4:12 pm por Devisser Groen

» hoveeeeeeeeer
header carrusel EmptyLun Ene 11, 2016 12:17 am por Admin

» Codigos!!!!!
header carrusel EmptyLun Ene 04, 2016 4:24 pm por Devisser Groen

» Tu primer tema
header carrusel EmptyJue Dic 17, 2015 4:32 pm por Admin


header carrusel

Ver el tema anterior Ver el tema siguiente Ir abajo

header carrusel Empty header carrusel

Mensaje por Admin Miér Mar 09, 2016 12:36 am

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>
 
Admin
Mensajes : 22

Fecha de inscripción : 17/12/2015

https://paraforosdeprueba22.activo.mx
Admin
Admin

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.