[SOLUCIONADO] Como puedo crear un mejor efecto en mi slideshow con JQuery

Dckings · #1 (**permalink**) 17/04/2015, 00:50

De antemano gracias por su tiempo y sus respuestas de verdad, bien eh estado estudiando un poco de JQuey y empece a crear un slideshow muy rudimentario , solamente cambia las imágenes pero lo hace de golpe , no hay un intervalo entre cambio y cambio de forma lenta , es decir quiero crear el efecto de que se van las imágenes hacia la izquierda pero de forma lenta, la verdad no se que métodos usar aun soy algo novato en esto, así que mi pregunta es : COMO PUEDO LOGRAR ESE EFECTO DE TRANSICIÓN A LA IZQUIERDA PERO DE FORMA LENTA EN MI SLIDESHOW?

aqui mi codigo de lo que llevo echo :

Código:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Slider JQ</title>
		<style>
			#contenedor img{
				width: 660px;
				height:400px;
			}

			#contenedor{
				height: 400px;
				width:660px;
				margin:0 auto;
				overflow: hidden;
				border:groove 10px #000;
			}

			#botonera{
				text-align: center;
				width:150px;
				height:40px; 
				margin:10px auto;
			}
		</style>
		<script src="JQuery.js"></script>
		<script>

			$(document).on('ready',function  () {
				
				$('#adelante').on('click',function(){
					$('#contenedor img:first').appendTo('#contenedor');
				})

				$('#atras').on('click',function(){
					$('#contenedor img:last').prependTo('#contenedor:first');
				})
			})
		</script>
	</head>
	<body>
		<div id="contenedor">
			<img src="IMG1.jpg" alt="">
			<img src="IMG2.png" alt="">
			<img src="IMG3.jpg" alt="">
		</div>
		<div id="botonera">
			<button id="atras">Previus</button>
			<button id="adelante">Next</button>
			<!--<button></button>-->
		</div>
	</body>
</html>

MaNuX0218 · #2 (**permalink**) 17/04/2015, 01:58

Puedes utilizar slide, te dejo un ejemplo:

Código Javascript:

Ver original$("#contenedor img:first").hide('slide',{direction:'left'},1000);
$("#contenedor img:last").show('slide',{direction:'left'},1000);

No puedo decirte si funciona o no ya que no lo he probado, es una idea de como podrias hacerlo.

Saludos.

martinmiranda90 · #3 (**permalink**) 17/04/2015, 02:50

Hola. Te refieres a este tipo de efecto?

https://jsfiddle.net/miranda90/t05766ka/

Un saludo!

Dckings · #4 (**permalink**) 17/04/2015, 17:55

Muchas gracias a ambos por las respuestas, por cierto martinmiranda90 me tomo algo de tiempo pero ya entendi mejor tu código de verdad se agradece mucho y era lo que me faltaba para mejorar el slideshow , saludos :D