Slideshow simplu cu jQuery

Fără prea multă vorbărie, direct codul, așa cum l-am folosit într-un proiect recent:


(function($){
	$.fn.ntzSlider = function(options){
		o = jQuery.extend({
			height: 135,
			incrementBy:5
 		}, options);

	return this.each(function(){
    	var t=$(this);
    	t.wrap('<div class="ntzSliderWrapper"/>');
    	t.wrap('<div class="ntzSliderWrapper2"/>');

    	var wrapper = t.closest('.ntzSliderWrapper'),
    			wrapper2 = t.closest('.ntzSliderWrapper2'),
    			elWidth = t.find('li:first').width(),
    			maxWidth = t.find('li').length * elWidth;

    	t.width(maxWidth);

    	wrapper.append('<a class="ntzSliderCtrl ntzSliderPrev"/> <a class="ntzSliderCtrl ntzSliderNext"/>');

    	wrapper.add(wrapper2).css({
    		height:o.height,
    		position:'relative'
    	});
    	wrapper2.css('overflow', 'hidden');

    	function showHideArrows() {
  			var curPos = parseInt(t.css('marginLeft'), 10) || 0;
    		if(curPos == 0) {
    			wrapper.find('.ntzSliderPrev').hide();
    		}else {
    			wrapper.find('.ntzSliderPrev').show();
    		}

    		if(-curPos >= (maxWidth - wrapper2.width())){
    			wrapper.find('.ntzSliderNext').hide();
    		}else {
    			wrapper.find('.ntzSliderNext').show();
    		}
    	};//showHideArrows
    	showHideArrows();
    	wrapper.find('.ntzSliderCtrl').click(function(){
    		if(t.is(':animated')){return false;}
    		showHideArrows();
    		var curPos = parseInt(t.css('marginLeft'), 10) || 0;
    		if($(this).hasClass('ntzSliderPrev') && curPos < 0){
    			t.animate({
    				marginLeft:'+='+(o.incrementBy*elWidth)
    			}, function(){
    				showHideArrows();
    			});
    		}
    		if($(this).hasClass('ntzSliderNext') && (-curPos < (maxWidth - wrapper2.width()))){
    			t.animate({
    				marginLeft:'-='+(o.incrementBy*elWidth)
    			}, function(){
    				showHideArrows();
    			});
    		}
    		return false;
    	});
		});
	};
})(jQuery);

Puțin css:

.ntzSlider li {
	float:left;
	width:178px;
}

.ntzSliderWrapper .ntzSliderCtrl {
	position:absolute;
	left:-6px;
	top:50%;
	width:29px;
	height:43px;
	margin-top:-23px;
	background:url(../images/basaldella_prev.png) no-repeat left top;
	cursor:pointer;
}
.ntzSliderWrapper .ntzSliderNext {
	background-image:url(../images/basaldella_next.png);
	left:auto;
	right:-6px;
}

Și iese asta:

Notă: Am presupus că sliderul va avea width 100%

Ți-a plăcut articolul? Lasă un comentariu!

Poți insera blocuri de cod folosind BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
Poți folosi și câteva tag-uri HTML:
<blockquote>.</blockquote> <a href="">.</a> <strong>.</strong> <em>.</em>