полный размер на изображении клик & слайдер

Question

Я пытаюсь сделать слайдер изображения, когда я нажимаю изображение.
'prev' и 'next' Button Я хочу сделать слайд! от текущего изображения.
этот код jquery полноэкранный просмотр изображения функция на изображении клик.

Пожалуйста, помогите слайд-функции при нажатии кнопки.

$('.media').ready(function() { 
 
    $('.media_img').click(function() { 
 
    var numImage = $('#image_slider').children().length; 
 
    var total = numImage; 
 
    var src = $(this).attr('src'); 
 

 
    window.alert(numImage); 
 

 
    $('.media_full').fadeIn(500); 
 
    $('.img_view img').attr('src', src); 
 

 
    $('.prev').click(function() { 
 
     window.alert('go to prev'); 
 

 
    }); 
 

 
    $('.next').click(function() { 
 
     window.alert('go to next'); 
 
    }); 
 

 
    }); 
 
    $('.view_close').click(function(){ 
 
    $('.media_full').fadeOut(500); 
 
    }); 
 
});

.media { position: relative; width: 100%; height: 150px; } 
 
.media ul { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; } 
 
.media ul li { height: 100%; display: inline-block; list-style: none; } 
 
.media ul li img { width: auto; height: 100%; cursor: pointer; } 
 
.media_full { z-index: 10; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); } 
 
.prev { position: absolute; top: 0; left: 0; width: 100px; height: 100%; background-color: rgba(0,0,0,0.8); color: #FFFFFF; font-size: 2em; font-weight: bold; } 
 
.next { position: absolute; top: 0; right: 0; width: 100px; height: 100%; background-color: rgba(0,0,0,0.8); color: #FFFFFF; font-size: 2em; font-weight: bold; } 
 
.view_close { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); width: 200px; height: 50px; font-size: 2em; color: #FFFFFF; background-color: rgba(0,0,0,0.8); border-radius: 30px; } 
 
.img_view { position: fixed; top: 0; right: 0; bottom: 0; left:0; width: auto; height: 100%; } 
 
.img_view img { display: block; margin: 0px auto; height: 100%; } 
 
.prev { position: absolute; left: 0; } .next { position: absolute; right: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="media"> 
 
    <ul id="image_slider"> 
 
    <li><img class="media_img" src="sp1.jpg" alt="" /></li> 
 
    <li><img class="media_img" src="sp3.jpg" alt="" /></li> 
 
    <li><img class="media_img" src="sp2.jpg" alt="" /></li> 
 
    <li><img class="media_img" src="sp4.jpg" alt="" /></li> 
 
    <li><img class="media_img" src="sp_gif.gif" alt="" /></li> 
 
    </ul> 
 
    <div class="media_full"> 
 
    <div class="img_view"> 
 
     <img id="img" src="" alt="" /> 
 
    </div> 
 
    <button class="prev" id="prev" type="button">◀</button> 
 
    <button class="next" id="next" type="button">▶</button> 
 
    <button class="view_close" type="button">close view</button> 
 
    </div> 
 
</div>

Answer 1

При нажатии кнопки следующая/предыдущая щелкают мы можем найти и нажмите на следующее/предыдущее изображение. Это вызовет логику, написанную для щелчка изображения. См следующий код

$('.prev').off('click').click(function() { 
    if ($(currImg).closest('li').prev().find('.media_img').length) { 
     $(currImg).closest('li').prev().find('.media_img').trigger('click'); 
    } 
    else{ 
     $('.media_img:last').trigger('click'); 
    } 
}); 

$('.next').off('click').click(function() { 
    if ($(currImg).closest('li').next().find('.media_img').length) { 
     $(currImg).closest('li').next().find('.media_img').trigger('click'); 
    } 
    else{ 
     $('.media_img:first').trigger('click'); 
    } 
}); 

См JSFiddle here