my code stock.com

Kostenlose jQuery SlideShow. Lizenz: GNU GPL v3

Snippet options

Download: Download snippet as jquery-coolslider.js.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

jQuery.fn.coolSlider = function(options) {
	return this.each(function(){
		settings = jQuery.extend({
            width: 598,
            buttonWidth: 30,
            buttonHoverAddWidth: 10,
            buttonHoverAnimationSpeed: 200,
            buttonLeaveAnimationSpeed: 400,
            slidesContainerClass: '.slides',
            slideSpeed: 600,
            autoPlay: 5000
        }, options);
		
		n_this = this;
		actSlide = 0;
		
		jQuery('.nextBtn, .prevBtn', this).hover(function(){
			jQuery(this).stop(true);
			jQuery(this).animate({
				width: '+='+settings.buttonHoverAddWidth,
				opacity: 1
			}, settings.buttonHoverAnimationSpeed);
		}, function(){
			jQuery(this).stop();
			jQuery(this).animate({
				width: settings.buttonWidth,
				opacity: 0.5
			}, settings.buttonLeaveAnimationSpeed);
		});
		
		NoS = jQuery(settings.slidesContainerClass+' > *', this).length;
		sliderWidth = (NoS+2) * settings.width;
		jQuery(settings.slidesContainerClass, this).css('width', sliderWidth+'px');
		
		NoS2 = NoS-1;
		
		jQuery(settings.slidesContainerClass+' > *:eq('+NoS2+')').clone().insertBefore(settings.slidesContainerClass+' > *:eq(0)');
		jQuery(settings.slidesContainerClass+' > *:eq(1)').clone().insertAfter(settings.slidesContainerClass+' > *:eq('+NoS+')');
		
		jQuery(settings.slidesContainerClass, this).css('left', '-'+settings.width+'px');
		
		nextSlide = function(){
			if(actSlide >= NoS2){
				newLeft = 0;
				jQuery(settings.slidesContainerClass, n_this).css('left', '-'+newLeft+'px');
				actSlide = -1;
			}
			
			jQuery(settings.slidesContainerClass, n_this).animate({
				left: '-='+settings.width
			}, settings.slideSpeed);
			actSlide = actSlide+1;
			return false;
		}
		
		prevSlide = function(){
			if(actSlide <= 0){
				newLeft = (NoS+1)*settings.width;
				jQuery(settings.slidesContainerClass, n_this).css('left', '-'+newLeft+'px');
				actSlide = NoS2+1;
			}
			
			jQuery(settings.slidesContainerClass, n_this).animate({
				left: '+='+settings.width
			}, settings.slideSpeed);
			actSlide = actSlide-1;
			return false;
		}
		
		jQuery('.nextBtn', this).bind('click', function(){
			clearInterval(autoPlayer);
			nextSlide();
			return false;
		});
		
		jQuery('.prevBtn', this).bind('click', function(){
			clearInterval(autoPlayer);
			prevSlide();
			return false;
		});
		
		if(!isNaN(settings.autoPlay)){
            var autoPlayer = window.setInterval('nextSlide()', settings.autoPlay);
		}
	});
};

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.