var totalSlides = 0; var currentSlide = 1; var contentSlides = ""; $(document).ready(function () { $("#slideshow-previous").click(showPreviousSlide); $("#slideshow-next").click(showNextSlide); updateNumericSelector(); $('.control').click(function () { currentSlide = $(this).val(); updateContentHolder(); updateButtons(); updateNumericSelector(); }); var totalWidth = 0; contentSlides = $(".slideshow-content"); contentSlides.each(function (i) { totalWidth += this.clientWidth; totalSlides++; }); $("#slideshow-holder").width(totalWidth); $("#slideshow-scroller").attr({ scrollLeft: 0 }); updateButtons(); }); function showPreviousSlide() { currentSlide--; updateContentHolder(); updateButtons(); updateNumericSelector(); } function showNextSlide() { currentSlide++; updateContentHolder(); updateButtons(); updateNumericSelector(); } function updateContentHolder() { var scrollAmount = 0; contentSlides.each(function (i) { if (currentSlide - 1 > i) { scrollAmount += this.clientWidth; } }); $("#slideshow-scroller").animate({ scrollLeft: scrollAmount }, 1000); } function updateButtons() { if (currentSlide < totalSlides) { $("#slideshow-next").show(); } else { $("#slideshow-next").hide(); } if (currentSlide > 1) { $("#slideshow-previous").show(); } else { $("#slideshow-previous").hide(); } } function updateNumericSelector() { $(".control").each(function () { var self = $(this); if (self.val() == currentSlide) { self.addClass('selected'); }else{ self.removeClass('selected'); } }); }
<div id="slideshow-area"> <div id="slideshow-scroller"> <div id="slideshow-holder"> <div class="slideshow-content"> <img src="http://tech.pro/_sotc/sites/default/files/467/images/eureka_small.jpg" style="height:100%; width:100%;" /> </div> <div class="slideshow-content"> <img src="http://tech.pro/_sotc/sites/default/files/467/images/wallace_gromit_small.jpg" style="height:100%; width:100%;" /> </div> <div class="slideshow-content"> <img src="http://www.desktopwallpaperhd.net/wallpapers/3/c/nature-coasts-background-beaches-wallpaper-39180.jpg" style="height:100%; width:100%;" /> </div> </div> </div> <div id="slideshow-previous"></div> <div id="slideshow-next"></div> </div> <ol id="controls"> <li id="controls1" class="control" value="1">1</li> <li id="controls2" class="control" value="2">2</li> <li id="controls3" class="control" value="3">3</li> </ol></br> <p><font size="3"><b>Source for this<a target="_blank"href="http://jqfaq.com/how-to-combine-a-numeric-selector-with-a-jquery-slider/"</a> JQFaq Question<b/><font/><p/> <iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%; height:115px; border:none;" />
#slideshow-area, #slideshow-scroller { width: 400px; height:250px; position: relative; overflow: hidden; margin: 0 auto; } #slideshow-area { border: 1px solid #000; } #slideshow-holder { height: 300px; } #slideshow-previous, #slideshow-next { width: 50px; height: 50px; position: absolute; background: transparent url("http://tech.pro/_sotc/sites/default/files/467/images/arrow_left.png") no-repeat 50% 50%; top: 125px; display: none; cursor: pointer; cursor: hand; } #slideshow-next { display: block; background: transparent url("http://tech.pro/_sotc/sites/default/files/467/images/arrow_right.png") no-repeat 50% 50%; top: 125px; right: 0; } .slideshow-content { float: left; width: 400px; height:250px; } ol#controls li { margin: 0 10px 0 0; padding: 0; float: left; list-style: none; height: 28px; width:28px; line-height: 28px; border:1px solid gray; background-color:rgb(218,243,248); text-align:center; } .selected{ background-color:rgb(93,201,225) !important; }