2 Replies - 6345 Views - Last Post: 22 January 2012 - 11:50 PM

#1 JQShamim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-January 12

Jquery Image Carousel

Posted 16 January 2012 - 02:39 AM

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:

:code:

Also, moved to jQuery forum

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


Is This A Good Question/Topic? 0
  • +

Replies To: Jquery Image Carousel

#2 RetardedGenius  Icon User is offline

  • >>──(Knee)──►
  • member icon

Reputation: 125
  • View blog
  • Posts: 555
  • Joined: 30-October 10

Re: Jquery Image Carousel

Posted 19 January 2012 - 04:09 PM

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

Was This Post Helpful? 2
  • +
  • -

#3 JQShamim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-January 12

Re: Jquery Image Carousel

Posted 22 January 2012 - 11:50 PM

Hey thanks for the tip, I will look into the Jquerry animate features
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1