[SOLUCIONADO] hacer un slider responsivo

devil65 · #1 (**permalink**) 17/09/2015, 18:50

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*{
    border:0;
    margin: 0;
    padding: 0;
 
}
 
body{
    background: #ccc;
 
}
#contenedor{
    background: green;
    height: 100%;
    width: 80%;
    margin: 0 auto;
    
}
header, #banner,#noticias, footer{
    background: #fff;
    width: 100%;
    height: 100px;
}
 
    
    #noticias{
        background: #fff;
        height: 220px;
 
    }
    #banner{
        background: #666;
        height: 500px;
        margin: 0 auto;
}
 
    footer{
        background: yellow;
        margin: 0 auto;
        
}
 
footer p{
    text-align: center;
    padding: 20px;
    margin: 0 auto;
}
.slideshow{
    width: 800%; 
    max-width:400px; 
    margin: 0 auto;
    
 
  float: left;
  
  border: 0;
}

y este es el html

Código HTML:

Ver original<script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/cycle.js"></script>
 
<script type="text/javascript">
      $(document).ready(function() {
      $('.slideshow').cycle({
      fx:'shuffle'
     });
   });
  
 
</script>
 
</head>
<body>
  <section id="contenedor">
    
 
 
      <header>
 
      </header>
      <section id="banner">
  
  <div class="slideshow">
  
    <li><img src="images/img-1.jpg" alt="" height="500" width="981"> </li>
    <li><img src="images/img-2.jpg" height="500" width="981"></li>
    <li><img src="images/img-3.jpg" height="500" width="981"></li>
  </div>
      
      
 
      </section>

javy7v · #2 (**permalink**) 18/09/2015, 03:12

Si te sirve de ayuda yo he usado este slider en un proyecto hace muy poco y es totalmente responsive y muy facil de integrar solo tienes que poner una foto grande para el slide y la misma mas pequeña para la miniatura cuando haces hover:

http://www.pixedelic.com/plugins/camera/

devil65 · #3 (**permalink**) 18/09/2015, 14:24

muchas gracias por tu respuesta pero una pregunta este slider es gratis??? es que no quiero que despues me digan que me toca pagar por usar este slider.

gracias

AngelKrak · #4 (**permalink**) 19/09/2015, 06:21

amigo para empezar no veo en tu codigo que tengas Las Media Queries para el Responsive por eso no se vee como quieres ;)

y el slider que te pasaron si es Gratis, fijate en el Menu que dice un Boton de Download ;)

Por si quieres saber mas sobre las Media Queries(Diseño Responsivo) ;)
https://developer.mozilla.org/es/docs/CSS/Media_queries

devil65 · #5 (**permalink**) 19/09/2015, 21:57

muchas gracias por tu respuesta y gracias por las media queries pero he visto en ultimos tutoriales que ya casi no se utilizan solo basta con poner unas sencillas lineas de codigo css3 y listo todo queda responsivo, pues no se si esta sea la ultima palabra ya que esto me lo dijeron en un curso que estoy realizando de video2brain. igual gracias por tu amable ayuda ya que ya encontré lo que necesitaba.

DoPeY-BBS · #6 (**permalink**) 20/09/2015, 20:21

Ademas le estas dando una unidad de medida en pixeles a la clase .slidershow, deberías usar la unidad de medida rem.