ayuda implementar slider

[colcrt]

hola, veran estoy creando y a la misma vez aprendiendo a programar y me he liado un poco con la implementacion de un slider en mi web https://www.instajuegos.com en la parte de destacados quiero que aparescan 4 imagenes una a lado de la otra y mas pequeñas pero hay esta el dilema nose como esto es lo que tengo hasta ahora:

Código (html4strict) [Seleccionar] Expandir

<div class="slides">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="box-team wow bounceInDown" data-wow-delay="0.1s">
                   <img src="img/team/1.jpg" alt="" class="img-responsive" />
                   <h4>Kurt coleman</h4>
                   <p>Art Director</p>
</div>
               </div>
               <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.3s">
<div class="box-team wow bounceInDown">
                   <img src="img/team/2.jpg" alt="" class="img-responsive" />
                   <h4>Isobel lyna</h4>
                   <p>Web Designe</p>
</div>
               </div>
               <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.5s">
<div class="box-team wow bounceInDown">
                   <img src="img/team/3.jpg" alt="" class="img-responsive" />
                   <h4>Leslie gutierrez</h4>
                   <p>Illustrator</p>
</div>
               </div>
               <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.7s">
<div class="box-team wow bounceInDown">
                   <img src="img/team/4.jpg" alt="" class="img-responsive" />
                   <h4>Letitia pena</h4>
                   <p>Typographer</p>
</div>
               </div>
 </div>

<script>
$(function(){
$(".slides").slidesjs({
})
})
</script>

y en el css:

Código (css) [Seleccionar] Expandir

.slides{
width:100%;
}
.slidesjs-pagination{
background:#112233;
list-style:none;
overflow:hidden;
}
.slidesjs-pagination li{
float:left;
}
.slidesjs-pagination li a{
display:block;
padding:5px 6px;
color:#fff;
text-decoration:none;
}
.slidesjs-pagination li a:hover{
background:#44BBFF;
}
.slides .active{
background:#44BBFF;
}
.slidesjs-navigation{
background:#44BBFF;
color:#fff;
text-decoration:none;
display:inline-block;
padding:3px 10px;
float:right;
}

pido muy comedidamente su colaboracion  


Mod: Obligatorio el uso de etiquetas GeSHi.

[basickdagger]

para hacer sliders yo suelo utilizas slick slider, es muy fácil de implementar, puedes hacer slides responsive, y es apto para smartphones, par alos cambios con touch...

vienen ejemplos y demos,  es muy sencillo de dominar... saludos!

http://kenwheeler.github.io/slick/

saludos!

[colcrt]

basickdagger

gracias funciono y quedo muy bien  y super sencillo