Прокрутка div по горизонтали

Question

Как прокручивать прокрутку влево или вправо с помощью кнопки навигации?

<div class="slider-wrap"> 
<div class="slide-wrap"> 
    <div class="slider-slide-wrap"></div> 
    <div class="slider-slide-wrap"></div> 
    <div class="slider-slide-wrap"></div> 
</div> 
</div> 
<div id="slider-left" class="slider-nav"></div> 
<div id="slider-right" class="slider-nav"></div> 

JS

$("#slider-left").click(function(){ 
    alert("< clicked."); 
}); 
$("#slider-right").click(function(e){ 
     alert("> clicked."); 

    $('.slide-wrap').scrollLeft(5000); 
}); 

Fiddle

Answer 1

Вы выбираете неправильный <div>. Обратите внимание на селектор: $('.slider-wrap') (не .slide-wrap).

$("#slider-left").click(function() { 
    $('.slider-wrap').animate({ 
     scrollLeft: 0 
    }, 200); 
}); 

Я использовал .animate, потому что вы получаете визуальную обратную связь о том, что происходит (, так что я думаю, с помощью одушевленных лучше UX). Это будет работать одинаково хорошо с .scrollLeft() хотя:

$("#slider-left").click(function() { 
    $('.slider-wrap').scrollLeft(0); 
}); 

Смотреть это работает в fiddle