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(‘

‘);
t.wrap(‘

‘);

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(‘ ‘);

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); [/js] Puțin css: [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; } [/css] Și iese asta: [demo https://www.iamntz.com/experiments/simple_slideshow/] Notă: Am presupus că sliderul va avea width 100%

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

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter