Slider o carrusel de imágenes en movimiento para web

Esto es un tutorial de como hacer un slider o carrusel de imágenes en movimiento para una pagina web. El slider es de los mas sencillos que eh visto y muy fácilmente adaptable. Si necesitas atraer la atención de tus visitantes con una animación de imágenes agradable seguro que te sera de mucho provecho!.

Captura



Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    var slides, timer;
    slides = $('#slider .slidesContainer > .slide');
    function sliderScroll(direction){
       position = $('#slider').scrollLeft();
       totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth
       switch (direction) {
            case 'right': 
                if (position+slides[0].offsetWidth > totalWidth){
                    $('#slider:not(:animated)').animate({scrollLeft:0},1000);
                } else { 
                    $('#slider:not(:animated)').animate({scrollLeft:position+slides[0].offsetWidth},1000);
                }
                break;
            case 'left': 
                if (position-slides[0].offsetWidth < 0){ 
                    $('#slider:not(:animated)').animate({scrollLeft:totalWidth},1000);
                } else { 
                    $('#slider:not(:animated)').animate({scrollLeft:position-slides[0].offsetWidth},1000);
                }
                break;
        }
   }
   function initTimer(){
        timer = setInterval(function(){sliderScroll('right');}, 5000);
   }
    $('#slider .slidesContainer').css('width',slides[0].offsetWidth * slides.length);
    $('.next').click(function(){
        clearInterval(timer); 
        sliderScroll('right'); 
        initTimer(); 
        return false;
    });
    $('.prev').click(function(){
        clearInterval(timer);
        sliderScroll('left'); 
        initTimer(); 
        return false;
    });
    initTimer();
});
</script>

Css

<style>
:focus {
	outline: 0;
}
.sliderContainer{
    width: 750px;
    height: 350px;
    position: relative;
    margin: 25px auto;
}
#slider {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: 600px;
    height: 350px;
    background: #FFF;
    border: 5px solid #FFF;
    overflow: hidden;
    position: relative;
    margin: auto;
}
#slider .slide{
    width: 600px;
    height: 350px;
    float: left;
}
.prev, .next{
    display: block;
    height: 56px;
    width: 56px;
    position: absolute;
    top: 147px;
}
.prev{
    background: url('http://i.imgur.com/h5TKv7x.png') no-repeat;
    background-position: 0 0;
    left: 0;
}
.prev:hover{
    background-position: 0 -56px;
}
.next{
    background: url('http://i.imgur.com/zVa8cXL.png') no-repeat;
    background-position: 0 0;
    right: 0;
}
.next:hover{
    background-position: 0 -56px;
}
</style>

Html

<div class="sliderContainer">

      <a href="#siguiente" class="next" title="Siguiente"></a>
      <a href="#anterior" class="prev" title="Anterior"></a>
      <div id="slider">
          <div class="slidesContainer">
              <div class="slide"><img src="http://i.imgur.com/KEmq8hr.jpg" alt="Coche 01" /></div>
              <div class="slide"><img src="http://i.imgur.com/4IeR6L7.jpg" alt="Coche 02" /></div>
          </div> 
      </div>
      </div>

Demo

Si te a gustado el post compártelo! Saludos..