слайдер Изображение не работает должным образом

Question

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

Я попробовал его с значение индекса, я хочу показать, как Ли в значение индекса упоминается Вот код

<div class="container"> 
<ul class="thediv"> 
<li><img src="images/1.jpg" width="620" height="320" /></li> 
<li><img src="images/2.jpg" width="620" height="320" /></li> 
<li><img src="images/3.jpg" width="620" height="320" /></li> 
</ul> 
</div> 
<a href="" id="next">Next</a> 
<a href="" id="prev">Previous</a> 

Вот fiidle для лучшего понимания

Спасибо заранее

Answer 1

Вы показываете все 3 изображения, когда нажимаете «Далее», потому что вы просматриваете их все и вызываете show(). Но поскольку у вас есть ширина/ширина ul, определенные вместе с переполнением: скрытые, вы не видите изображения, когда они отображаются. Чтобы продемонстрировать, удалите стиль .container ul {width: 620px; overflow: hidden; height: 320px;} и нажмите кнопку «Далее».

Я бы упростить свой подход с чем-то вроде этого:

$(document).ready(function(){ 
    $("#next").click(function(){ 
      var next = $(".thediv li:visible").next(); 
      next.show().prev().hide();   
    }); 

     $("#prev").click(function(){ 
      var prev = $(".thediv li:visible").prev(); 
      prev.show().next().hide();  
    }); 
}); 

http://jsfiddle.net/6xt79xwt/21/