Adding previous and next buttons for images

Question

I'm trying to add a 'Previous' and 'next' button that will cycle through all the images in my "medium" div below.

I'm using jQuery to display the "medium" images from thumbnails and now would like to add in the previous and next buttons as an added way of viewing the images.

Is there a quick way of adding that functionality and have it cycle through?

JSFiddle is available here: http://jsfiddle.net/md6u68z1/

Live Demo:

 $(function() { $(".medium img:eq(0)").nextAll().hide(); $(".thumbs img").click(function(e) { var index = $(this).index(); $(".medium img").eq(index).show().siblings().hide(); }); }); 

 .thumbs img { width: 30%; float: left; box-sizing: border-box; padding: 10px; } .medium { padding-bottom: 10px; } .medium img { width: 90%; } .thumbs img:hover { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="medium"> <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg" /> <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg" /> <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg" /> </div> <div class="thumbs"> <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg"> <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg"> <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg"> </div> 

Answer 1

Here's one way to add next and previous buttons, using an index variable to keep track of the currently showcased image.

Live Demo:

 var index = 0; var total = $(".medium img").length; $(function() { $(".medium img:eq(0)").nextAll().hide(); $(".thumbs img").click(function(e) { var index = $(this).index(); $(".medium img").eq(index).show().siblings().hide(); }); }); $("#prev").click(function() { index--; if (index < 0) index = total - 1; $(".medium img").eq(index).show().siblings().hide(); }); $("#next").click(function() { index++; if (index >= total) index = 0; $(".medium img").eq(index).show().siblings().hide(); }); 

 .thumbs img { width: 30%; float: left; box-sizing: border-box; padding: 10px; } .medium { padding-bottom: 10px; } .medium img { width: 90%; } .thumbs img:hover { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="medium"> <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg" /> <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg" /> <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg" /> </div> <div class="thumbs"> <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg"> <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg"> <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg"> </div> <button id="prev">previous</button> <button id="next">next</button> 

JSFiddle Version: http://jsfiddle.net/md6u68z1/1/