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%
- Posted in:
- jQuery,
- Playground
