Tema: hacer un slider responsivo
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/09/2015, 18:50
devil65
 
Fecha de Ingreso: marzo-2015
Mensajes: 184
Antigüedad: 9 años, 1 mes
Puntos: 3
Pregunta hacer un slider responsivo
hola buenas noches.

lo que pasa es que estoy haciendo una pagina web y le inserte un slide que descargue de internet con jquery y css3 pero lo que no he logrado es hacerlo adaptable. aqui les dejo el css3 para que por favor me indiquen que tengo mal.


desde ya gracias por su amble ayuda ya que soy nuevo en esto.
Código CSS: 
Ver original
  1. *{
  2.     border:0;
  3.     margin: 0;
  4.     padding: 0;
  5.  
  6. }
  7.  
  8. body{
  9.     background: #ccc;
  10.  
  11. }
  12. #contenedor{
  13.     background: green;
  14.     height: 100%;
  15.     width: 80%;
  16.     margin: 0 auto;
  17.     
  18. }
  19. header, #banner,#noticias, footer{
  20.     background: #fff;
  21.     width: 100%;
  22.     height: 100px;
  23. }
  24.  
  25.     
  26.     #noticias{
  27.         background: #fff;
  28.         height: 220px;
  29.  
  30.     }
  31.     #banner{
  32.         background: #666;
  33.         height: 500px;
  34.         margin: 0 auto;
  35. }
  36.  
  37.     footer{
  38.         background: yellow;
  39.         margin: 0 auto;
  40.         
  41. }
  42.  
  43. footer p{
  44.     text-align: center;
  45.     padding: 20px;
  46.     margin: 0 auto;
  47. }
  48. .slideshow{
  49.     width: 800%; 
  50.     max-width:400px; 
  51.     margin: 0 auto;
  52.     
  53.  
  54.   float: left;
  55.   
  56.   border: 0;
  57. }

y este es el html
Código HTML: 
Ver original
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2.      <script type="text/javascript" src="js/cycle.js"></script>
  3.  
  4. <script type="text/javascript">
  5.       $(document).ready(function() {
  6.       $('.slideshow').cycle({
  7.       fx:'shuffle'
  8.      });
  9.    });
  10.   
  11.  
  12. </script>
  13.  
  14. </head>
  15. <body>
  16.   <section id="contenedor">
  17.     
  18.  
  19.  
  20.       <header>
  21.  
  22.       </header>
  23.       <section id="banner">
  24.   
  25.   <div class="slideshow">
  26.   
  27.     <li><img src="images/img-1.jpg" alt="" height="500" width="981"> </li>
  28.     <li><img src="images/img-2.jpg" height="500" width="981"></li>
  29.     <li><img src="images/img-3.jpg" height="500" width="981"></li>
  30.   </div>
  31.       
  32.       
  33.  
  34.       </section>