Horizontal Scrolling Ul With Buttons And "width:auto" Lists

As the title suggests, I am trying to create a horizontal scrollable

with
• with width:auto and with prev and next buttons, clearly with overflow:hidden. Any su

Solution 1:

You can simply use bxSlider without reinventing the wheel. To make your code work, you just need to add:

$(function () {
  $('#nav').bxSlider({
    pager: false,
    minSlides: 3,
    maxSlides: 3,
    slideWidth: 150,
    slideMargin: 25
  });
});

#wrapper {
  margin: auto;
}
.bx-viewport {
  height: 50px!important;
  padding: 030px;
  box-sizing: border-box;
  text-align: center;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" /><divid="wrapper"><ulid="nav"><li>Abbaiare</li><li>Bolle</li><li>Cantante</li><li>Domodossola</li><li>Elefante</li><li>Giovanni</li><li>Hotel</li><li>Inti</li><li>Montagna</li><li>Nave</li></ul></div>

Solution 2:

Hoping it will be useful for anyone, This what I needed... (Thank you Praveen Kumar)

JSFiddle

$(".arrow:first-of-type").click(function() {
        var navwidth = $("#nav");
        navwidth.animate( { scrollLeft: '-=200' }, 1000);
    }
);
$(".arrow:nth-of-type(2)").click(function() {
        var navwidth = $("#nav");
        navwidth.animate( { scrollLeft: '+=200' }, 1000);
    }
);