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
Si te a gustado el post compártelo! Saludos..
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..
5
Puntos
Puntos
4418
Visitas
Visitas
0
Resp
Resp
Por alber hace 110 meses
Administrador