Foros del Web » Programando para Internet » Javascript »

Cambiar Slider Horizontal a Vertical

Estas en el tema de Cambiar Slider Horizontal a Vertical en el foro de Javascript en Foros del Web. Hola amigos, Encontre este slider basico que es lo que estaba buscando. Pero me gustaria que en vez de hacer el scroll horizontal lo hicera ...
  #1 (permalink)  
Antiguo 29/05/2014, 09:58
 
Fecha de Ingreso: febrero-2014
Mensajes: 99
Antigüedad: 10 años, 1 mes
Puntos: 0
Cambiar Slider Horizontal a Vertical

Hola amigos,
Encontre este slider basico que es lo que estaba buscando.
Pero me gustaria que en vez de hacer el scroll horizontal lo hicera en vertical y automaticamente.
Alguien sabe como podria cambiarlo?

Os dejo el enlace.

http://codepen.io/zuraizm/pen/vGDHl


Saludos gracias
  #2 (permalink)  
Antiguo 29/05/2014, 17:45
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Cambiar Slider Horizontal a Vertical

revisa el javascript y cambia lo que dice left por top o bottom y en lugar de width usa height

simple lógica :D ya lo probé y funciona.
  #3 (permalink)  
Antiguo 29/05/2014, 18:23
 
Fecha de Ingreso: febrero-2014
Mensajes: 99
Antigüedad: 10 años, 1 mes
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
  #4 (permalink)  
Antiguo 30/05/2014, 13:08
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Cambiar Slider Horizontal a Vertical

No te has molestado en leer lo que te dije? no veo que hayas cambiado nada en el script referente a lo que te mencione.
  #5 (permalink)  
Antiguo 30/05/2014, 13:56
 
Fecha de Ingreso: febrero-2014
Mensajes: 99
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Cambiar Slider Horizontal a Vertical

Uy perdon, me confundi de script al copiar.
Con top si funciona pero con bottom no. Eso es lo que no consigo.

jQuery(document).ready(function ($) {

setInterval(function () {
moveRight();
}, 3000);

var slideCount = $('#slider ul li').length;
var slideheight = $('#slider ul li').height();
var slideHeight = $('#slider ul li').height();
var sliderUlheight = slideCount * slideheight;

$('#slider').css({ height: slideheight, height: slideHeight });
$('#slider ul').css({ height: sliderUlheight, margintop: - slideheight });
$('#slider ul li:last-child').prependTo('#slider ul');

function moveRight() {
$('#slider ul').animate({
top: - slideheight
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('top', '');
});
};


});



Saludos
  #6 (permalink)  
Antiguo 31/05/2014, 03:56
 
Fecha de Ingreso: febrero-2014
Mensajes: 99
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Cambiar Slider Horizontal a Vertical

Ya lo logre
Muchas gracias
Saludos ;)

Etiquetas: horizontal, slider, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:31.