CODEWITHSUNDEEP
javascriptjquerycss
Girish Kumar
Girish Kumar

Reputation: 113

Scrolling div horizontally

How can I make this scroll left or right using navigation button?

<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

Upvotes: 2

Views: 120

Answers (1)

jcuenod
jcuenod

Reputation: 58405

You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).

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

I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:

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

See it working in a fiddle

Upvotes: 2

Related Questions