btnPrev.cloneNode(true); buttonsCont.appendChild(btnNext); btnPrev.onfocus = function(){this.blur();} btnNext.onfocus = function(){this.blur();} btnPrev.onclick = function(){Slider.prev();} btnNext.onclick = function(){Slider.next();} if(buttons.prev.label) btnPrev.innerHTML = typeof(buttons.prev.label) == 'string' ? buttons.prev.label : 'prev'; if(buttons.prev.label) btnNext.innerHTML = typeof(buttons.next.label) == 'string' ? buttons.next.label : 'next'; if(buttons.prev.className) btnPrev.className = buttons.prev.className; if(buttons.next.className) btnNext.className = buttons.next.className; if(buttons.opacity || buttons.prev.opacity) setOpacity(btnPrev.style, buttons.opacity || buttons.prev.opacity); if(buttons.opacity || buttons.next.opacity) setOpacity(btnNext.style, buttons.opacity || buttons.next.opacity); } //NAVIGATION if(navigation){ var navigationCont = document.getElementById(navigation.container); var a; if(navigation.prev){ a = newElement('A'); if(navigation.prev.label) a.innerHTML = typeof(navigation.prev.label) == 'string' ? navigation.prev.label : 'Prev'; if(navigation.prev.className) a.className = navigation.prev.className; a.href = 'javascript:void(0);'; a.onfocus = function(){this.blur();}; a.onclick = function(){Slider.prev();}; navigationCont.appendChild(a); } var navigationLinks = []; for(var i = 0; i < images.length; i++){ a = newElement('A'); if(navigation.label) a.innerHTML = typeof(navigation.label) == 'string' ? navigation.label : i+1; if(navigation.className) a.className = navigation.className; a.href = 'javascript:void(0);'; a.id = parameters.container+'_SliderNavigation'+i; a.onfocus = function(){this.blur();}; a.onclick = function(){Slider.go(this.id.replace(/[^\d]+/g, ''));}; navigationLinks.push(a); navigationCont.appendChild(a); } if(navigation.next){ a = newElement('A'); if(navigation.next.label) a.innerHTML = typeof(navigation.next.label) == 'string' ? navigation.next.label : 'Next'; if(navigation.next.className) a.className = navigation.next.className; a.href = 'javascript:void(0);'; a.onfocus = function(){this.blur();}; a.onclick = function(){Slider.next();}; navigationCont.appendChild(a); } var navigationUpd = function(){ for(var i = 0; i < navigationLinks.length; i++) navigationLinks[i].className = navigationLinks[i].className.replace(/\bactive\b/g, ''); navigationLinks[current].className += ' active'; } }else var navigationUpd = ef //AUTOPLAY if(display.autoplay){ var autoplayTimeout; var autoplay = function(a){ if(autoplayTimeout) clearTimeout(autoplayTimeout); if(a && !(isHover && display.pause)) autoplayTimeout = setTimeout(Slider.next, display.autoplay); }//autoplay }else var autoplay = ef var doEffect = function(src){ eventCall('before'); showLoading(false); status = 'busy'; descriptionShow(); linkUpd(); navigationUpd(); Effects({effect: getEffect(), display: display, container: imagesCont, src: src, callback: function(img){ if(prevImg) prevImg.parentNode.removeChild(prevImg); prevImg = img; status = 'free'; autoplay(true); eventCall('after'); }, contentmode: contentmode}); }; Slider.next = function(){Slider.go(current + 1);} Slider.prev = function(){Slider.go(current - 1);} Slider.go = function(index){ index = (images.length + index) % images.length; autoplay(false); if(status != 'free' || current == index) return; previous = current; current = index; eventCall('loading'); showLoading(true); if(contentmode) doEffect(images[current]); else loadImage(images[current], doEffect, display.always_show_loading); }//go Slider.get = function(a){ switch(a){ case 'length': return images.length; break; case 'current': return current; break; case 'previous': return previous; break; case 'images': return images; break; case 'links': return links; break; case 'descriptions': return descriptions; break; } }//get if(display.mousewheel){ onmousewheel = function(d){ if(d > 0) Slider.prev(); else if(d < 0) Slider.next(); return true; }; function wheel(event){ var d = 0; if(!event) event = window.event; if(event.wheelDelta){ d = event.wheelDelta/120; if(window.opera) d = -d; }else if(event.detail) d = -event.detail/3; if(d && onmousewheel(d)){ if(event.preventDefault) event.preventDefault(); event.returnValue = false; } }//wheel if(mainCont.addEventListener){ mainCont.addEventListener("DOMMouseScroll",wheel,false); mainCont.addEventListener("mousewheel",wheel,false); }else addElementEvent(mainCont, 'onmousewheel', wheel); } Slider.go(0); return Slider; }//Sliderman.slider}//]]></script> <!-- /sliderman.js --><div class="c"></div><div id="SliderNameNavigation"></div><div class="c"></div><script type="text/javascript">// we created new effect and called it 'demo01'. We use this name later.Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});var demoSlider = Sliderman.slider({container: 'SliderName', width: 560, height: 300, effects: 'demo01',display: {pause: true, // slider pauses on mouseoverautoplay: 3000, // 3 seconds slideshowalways_show_loading: 200, // testing loading modedescription: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'}, // image description box settings loading: {background: '#000000', opacity: 0.2, image: 'https://lh6.googleusercontent.com/-L9uUNznsjlw/TYA_Y_hGZhI/AAAAAAAAAMc/kn0y8YKtCZg/s1600/loading.gif'}, // loading box settings buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // Next/Prev buttons settings navigation: {container: 'SliderNameNavigation', label: '&nbsp;'} // navigation (pages) settings }}); </script></div></div></div>E isso! Creditos ao blog Template e