Tema: Slider 100% css ¿transiciones?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/10/2014, 23:37
Avatar de sebandrescc2
sebandrescc2
 
Fecha de Ingreso: diciembre-2012
Mensajes: 45
Antigüedad: 12 años, 10 meses
Puntos: 0
Pregunta Slider 100% css ¿transiciones?
Hola

Como dice el titulo, actualmente tengo un slider 100% css en mi web, ya que es una plantilla antigua wordpress 3.0.1, y jquery me genera muchos conflctos

Mi duda es... ¿como puedo hacer para que al cargar el sitio comiencen a pasar una tras otra cada x segundos??

css
Código CSS: 
Ver original
  1. /*************************** Slider ***************************/
  2. #cc-slider {
  3.     text-align: center;
  4.     margin: 0 auto;
  5.     max-width: 850px;
  6. }
  7.  
  8. #cc-slider input {
  9.     display: none;
  10. }
  11.  
  12. #cc-slider label, a {
  13.     color: #02ADEF;
  14.     cursor: pointer;
  15.     text-decoration: none;
  16. }
  17. #cc-slider label:hover {
  18.     color: #02ADEF !important;
  19. }
  20.  
  21. #slide1:checked ~ #cc-slides .inner { margin-left:0; }
  22. #slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
  23. #slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
  24. #slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
  25. #slide5:checked ~ #cc-slides .inner { margin-left:-400%; }
  26.  
  27.  
  28. #overflow {
  29.     width: 100%;
  30.     overflow: hidden;
  31. }
  32.  
  33. #cc-slides article img {
  34.     width: 100%;
  35. }
  36.  
  37. #cc-slides .inner {
  38.     width: 500%;
  39.     line-height: 0;
  40. }
  41.  
  42. #cc-slides article {
  43.     width: 20%;
  44.     float: left;
  45. }
  46.  
  47. #controls {
  48.     margin: -8% 0 0 84%;
  49.     width: 15%;
  50.     height: 50px;
  51. }
  52.  
  53. #controls label { 
  54.     display: none;
  55.     width: 50px;
  56.     height: 50px;
  57.     
  58. }
  59.  
  60. #active {
  61.     margin: 23% 0 0;
  62.     text-align: center;
  63. }
  64.  
  65. #active label {
  66.     -webkit-border-radius: 5px;
  67.     -moz-border-radius: 5px;
  68.     border-radius: 5px;
  69.     display: inline-block;
  70.     width: 10px;
  71.     height: 10px;
  72.     background: #f89e67;
  73. }
  74.  
  75. #active label:hover {
  76.     background: #ccc;
  77.     border-color: #777 !important;
  78. }
  79.  
  80. #controls label:hover {
  81.     opacity: 0.8;
  82. }
  83.  
  84. #slide1:checked ~ #controls label:nth-child(2), 
  85. #slide2:checked ~ #controls label:nth-child(3), 
  86. #slide3:checked ~ #controls label:nth-child(4), 
  87. #slide4:checked ~ #controls label:nth-child(5), 
  88. #slide5:checked ~ #controls label:nth-child(1) {
  89.     background: url('http://partnerrestorant.cl/slider/images/next.png') no-repeat;
  90.     float: right;
  91.     margin: 0 10px 0 0;
  92.     display: block;
  93.     background-color:#02ADEF;
  94. }
  95.  
  96.  
  97. #slide1:checked ~ #controls label:nth-child(5),
  98. #slide2:checked ~ #controls label:nth-child(1),
  99. #slide3:checked ~ #controls label:nth-child(2),
  100. #slide4:checked ~ #controls label:nth-child(3),
  101. #slide5:checked ~ #controls label:nth-child(4) {
  102.     background: url('http://partnerrestorant.cl/slider/images/prev.png') no-repeat;
  103.     float: left;
  104.     margin: 0 0 0 17px;
  105.     display: block;
  106.     background-color:#02ADEF;
  107. }
  108.  
  109.  
  110.  
  111. /* cctooltip Box */
  112.  
  113. .cctooltip {
  114.     
  115.     color: #FFFFFF;
  116.     font-style: italic;
  117.     line-height: 20px;
  118.     margin-top: 150px;
  119.     opacity: 0;
  120.     position: absolute;
  121.     text-align: left;
  122.     -webkit-transform: translateZ(0);
  123.     -webkit-transition: all 0.3s ease-out;
  124.     -moz-transition: all 0.3s ease-out;
  125.     -o-transition: all 0.3s ease-out;
  126.     transition: all 0.3s ease-out;
  127. }
  128.  
  129. .cctooltip h3 {
  130.     color: #FFFFFF;
  131.     margin: 0 0 5px;
  132.     font-weight: normal;
  133.     font-size: 16px;
  134.     font-style: normal;
  135.     background: none repeat scroll 0 0 #222222;
  136.     padding: 5px;
  137. }
  138. .cctooltip h4 {
  139.     color: #FFFFFF;
  140.     margin: 0 0 5px;
  141.     font-weight: normal;
  142.     font-size: 14px;
  143.     font-style: normal;
  144.     background: none repeat scroll 0 0 #222222;
  145.     padding: 5px;
  146.     text-align:right;
  147.     width:200px;
  148. }
  149.  
  150.  
  151.  
  152. /* cc-slider Styling */
  153.  
  154. #cc-slides {
  155.     margin: 0px 0 0;
  156.     
  157.     
  158.     padding: 0.3%;
  159.     
  160.     background: #0E4058;
  161.     
  162. }
  163.  
  164.  
  165. /* Animation */
  166.  
  167. #cc-slides .inner {
  168.     -webkit-transform: translateZ(0);
  169.     -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  170.     -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  171.     -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  172.      -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  173.         transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  174.  
  175.     -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  176.     -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  177.     -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  178.      -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  179.         transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  180. }
  181.  
  182. #cc-slider {
  183.     -webkit-transform: translateZ(0);
  184.     -webkit-transition: all 0.5s ease-out;
  185.     -moz-transition: all 0.5s ease-out;
  186.     -o-transition: all 0.5s ease-out;
  187.     transition: all 0.5s ease-out;
  188. }
  189.  
  190. #controls label{
  191.     -webkit-transform: translateZ(0);
  192.     -webkit-transition: opacity 0.2s ease-out;
  193.     -moz-transition: opacity 0.2s ease-out;
  194.     -o-transition: opacity 0.2s ease-out;
  195.     transition: opacity 0.2s ease-out;
  196. }
  197.  
  198. #slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
  199. #slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
  200. #slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
  201. #slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip,
  202. #slide5:checked ~ #cc-slides article:nth-child(5) .cctooltip {
  203.     opacity: 1;
  204.     -webkit-transition: all 1s ease-out 0.6s;
  205.     -moz-transition: all 1s ease-out 0.6s;
  206.     -o-transition: all 1s ease-out 0.6s;
  207.     transition: all 1s ease-out 0.6s;
  208. }

y en el header de mi plantilla
Código HTML:
<!-- Cabecera-->

				<div class="container" style="width: 900px;">
    <article id="cc-slider">
      <input checked="checked" name="cc-slider" id="slide1" type="radio">
      <input name="cc-slider" id="slide2" type="radio">
      <input name="cc-slider" id="slide3" type="radio">
      <input name="cc-slider" id="slide4" type="radio">
      <!--input name="cc-slider" id="slide5" type="radio"-->
      <div id="cc-slides" style="height: 240px;">
        <div id="overflow">
          <div class="inner">
            <article>
              <div class="cctooltip">
                <h3>Ideal para su Restorant</h3>
                <h4>Más sobre Partner Restorant <a href="http://www.partnerrestorant.cl/?page_id=39">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-1.jpg"> 
            </article>
            <article>
              <div class="cctooltip">
                <h3>Ideal para gestión de alimentos</h3>
                <h4>Más sobre Partner Food <a href="http://www.partnerrestorant.cl/?page_id=939">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-2.jpg"> </article>
            <article>
              <div class="cctooltip">
                <h3>NightClub / Discoteque</h3>
                <h4>Más sobre nuestros softwares <a href="http://www.partnerrestorant.cl/?page_id=12">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-3.jpg"> </article>
            <article>
              <div class="cctooltip">
                <h3>Complemente su software</h3>
                <h4>Más sobre Partner Biométrico <a href="http://www.partnerrestorant.cl/?page_id=39">AQUÍ</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-4.jpg"> </article>
            <!--article>
              <div class="cctooltip">
                <h3>Fashion / Sport / Photography</h3>
                <h4>By <a href="#">codeconvey</a></h4>
              </div>
              <img src="http://partnerrestorant.cl/slider/images/slide-1.jpg"> </article-->
          </div>
        </div>
      </div>
      <div id="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>

      </div>
    </article>

	
  </div>


			</div>
Ojalá alguien me pueda echar una mano, aunque sea forzosamente con algo de js
__________________
Aquí voy a escribir mi firma