[JQShamim]

Hello there,

I am relatively new to Jquerry, lately I have been trying to build a Jquerry image carosuel which i accomplished using fadein fadeout techniques however I am finding it hard to write the same in SlideLeft sort of an approach Kindly help me in accoplish this with a sample code(if possible) with an explanation


the code that I am using right now is

<script type="text/javascript">
$(document).ready(function(e) {
	var timer;
	var speed = 4000;
	init_slide();
	
	function init_slide()
	{
		active = $('#content .image:first');
		timer = setTimeout(nextSlide, speed)
	}
	
	function nextSlide()
	{		
		next = (active.next('.image').length > 0) ? active.next(): $('#content .image:first');
		active.fadeOut('slow');
		next.fadeIn('slow');
		active = next;
		timer = setTimeout(nextSlide, speed)
	}
	function prevSlide()
	{		
		next = (active.prev('.image').length > 0) ? active.prev(): $('#content .image:last');
		active.fadeOut('slow');
		next.fadeIn('slow');
		active = next;
		timer = setTimeout(nextSlide, speed)
	}
	
	$('#prev').click(function(e) {
        prevSlide();
    });
	$('#next').click(function(e) {
        nextSlide();
    });
});
</script>

Thanks & Regards

Shameem

MOD EDIT: Fixed code tags. The RIGHT way to use code tags:



Also, moved to jQuery forum

This post has been edited by JackOfAllTrades: 16 January 2012 - 04:32 AM

[RetardedGenius]

You're using jQuery, take advantage of the features it has to offer! jQuery.animate provides a very simple and easy-to-use interface for animating CSS properties. As usual, the jQuery documentation is very clear.

jQuery defines only two easing functions; swing and linear. I recommend trying out the jQuery Easing Plugin for a varied selection of interesting animation functions - you can also define your own functions, if you so wish.

This post has been edited by RetardedGenius: 19 January 2012 - 04:10 PM

[JQShamim]

Hey thanks for the tip, I will look into the Jquerry animate features