29/05/2014, 18:23
|
| | Fecha de Ingreso: febrero-2014
Mensajes: 99
Antigüedad: 10 años, 11 meses Puntos: 0 | |
Respuesta: Cambiar Slider Horizontal a Vertical Acabo de revistar el script. Lo he simplificado y lo he puesto el scroll en auto.
Pero quise poner el scroll vertical hacia abajo (bottom) pero no lo consigo.
--------------------------------------------------------------------------------------------
jQuery(document).ready(function ($) {
setInterval(function () {
moveRight();
}, 3000);
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
});
#slider {position: relative;overflow: hidden;margin: 20px auto 0 auto;border-radius: 4px;}
#slider ul {position: relative;margin: 0;padding: 0;height: 200px;list-style: none;}
#slider ul li {position: relative;display: block;float: left;margin: 0;padding: 0;width: 500px; height: 300px;background: #ccc;text-align: center;line-height: 300px;}
<div id="slider">
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>
Saludos
Gracias |