Добавление предыдущей и следующей кнопок для изображений

Question

Я пытаюсь добавить кнопку «Предыдущая» и «следующая», которая будет циклически перемещаться по всем изображениям в моем «среднем» div ниже.

Я использую jQuery для отображения «средних» изображений из миниатюр и теперь хотел бы добавить предыдущие и следующие кнопки в качестве дополнительного способа просмотра изображений.

Есть ли быстрый способ добавить эту функциональность и пропустить ее?

JSFiddle доступна здесь: http://jsfiddle.net/md6u68z1/

Демо:

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

Вот один способ добавить следующие и предыдущие кнопки, с помощью индексной переменной для отслеживания отображаемое в настоящее время изображение.

Демо:

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 Версия: http://jsfiddle.net/md6u68z1/1/