How the get scroll the div horizontal using left and right buttons

Question

I have a class called portfolio-items where it will scroll horizontal. I need jQuery which helps me to scroll to the next and previous closest classes using my next and previous buttons. Need it more specific like on click my buttons it need the get the position of my closest div and scroll accordingly left or right.

Below Is my code

MARKUP

<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
    <div class='offer-pg'>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
    </div>
</div>

CSS

.offer-pg-cont{
    width: 100%;
    overflow-x: auto;
    margin: 0px;
}
span.arrow-left,span.arrow-right{
    display: block;
    position: absolute;
    background-color: #555;
    top: 40px;
    color:white;
    z-index: 2;
    cursor: pointer;
}
span.arrow-left{
    left: 0px;
}
span.arrow-right{
    right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
    background-color: #333;
}
.offer-pg{
    width: 1500px;
}
.item-wrapper.offer-con{
    background-color: #333 !important;
}
.offer-con .left-item h4 {
    color: #fff;
    font-weight: normal;
    margin: 0px;
}
.offer-con .right-item{
    float: right;
    padding: 10px;
}
.offer-con .right-item h5{
    color: #cb9944;
    margin: 0px;
    font-size: 14px;
}
.offer-pg > .portfolio-item{
    width: 100px;
    background-color:blue;
    margin-left:10px;
    float:left;
}

Please check my fiddle DEMO

Thanks.

Answer 1

I wrote a few lines and forked your fiddle: http://jsfiddle.net/jbrosi/c6kf2/ (I also accidentally updated yours - sorry for that).

This solution won't break if you manually scroll via mousewheel or keyboard in the container and it should respect items with varying sizes, too (just make sure your container is big enough for them to stay in one line).

$(document).ready(function() {

    //cache our items and containers
    var items = $(".portfolio-item");
    var scrollContainer = $(".offer-pg-cont");


    /**
     * Fetches the next or previous item from items
     *
     * @param conntainer {JQueryElement} scroll-container in which the items can be found
     * @param items {Array} items to be searched through
     * @param isNext {boolean} set to true (default) if you want the next item, to false if you want the previous one
     * @returns {*}
     */
    function fetchItem(container, items, isNext) {
        var i,
            scrollLeft = container.scrollLeft();

        //set isNext default to true if not set
        if (isNext === undefined) {
            isNext = true;
        }

        if (isNext && container[0].scrollWidth - container.scrollLeft() <= container.outerWidth()) {
            //we reached the last one so return the first one for looping:
            return $(items[0]);
        }

        //loop through items
        for (i = 0; i < items.length; i++) {

            if (isNext && $(items[i]).position().left > 0) {
                //this item is our next item as it's the first one with non-negative "left" position
                return $(items[i]);
            } else if (!isNext && $(items[i]).position().left >= 0) {
                //this is our previous item as it's the one with the smallest negative "left" position
                //if we're at item 0 just return the last item instead for looping
                return i == 0 ? $(items[items.length - 1]) : $(items[i-1]);
            }
        }

        //nothing found
        return null;
    }

    /**
     * Moves the scrollcontainer to the next/previous item (depending on event.data.direction).
     *
     * @param event
     */
    function moveToItem(event) {
        //fetch the next/previous item:
        var isNext = event.data.direction == "next";
        var item = isNext ? fetchItem(scrollContainer, items, true) : fetchItem(scrollContainer, items, false);

        if (item) {
            //scroll to item
            scrollContainer.animate({"scrollLeft": item.position().left + scrollContainer.scrollLeft()}, 400);
        }
    }

    //bind events
    $(".arrow-left").click({direction: "prev"}, moveToItem);
    $(".arrow-right").click({direction: "next"}, moveToItem);


});

Update: Edited the code so it loops when reaching first / last item

Answer 2

try

$(document).ready(function(){
    $(".arrow-left").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "-="+100});
    });
    $(".arrow-right").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "+="+100});
    });        
});

demo http://jsfiddle.net/xQh5J/177/

exactly you can detect width one item by :

var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));

And edit code

$(document).ready(function(){
    var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));
    $(".arrow-left").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "-="+widthOneItem});
    });
    $(".arrow-right").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "+="+widthOneItem});
    });        
});

demo http://jsfiddle.net/xQh5J/180/

Answer 3

You can try below code:

Demo

$(".arrow-left").click(function(){
    $(".offer-pg-cont").animate({scrollLeft: "-="+110});
});
$(".arrow-right").click(function(){
    $(".offer-pg-cont").animate({scrollLeft: "+="+110});
}); 

Answer 4

If this is thumbnail scroller you can use this plugin or this

You can customize it also, hope that will help you :)