Scroll Horizontally on mouse wheel scroll – Example: Horizontal scroller showcase

Have u ever wanted to have a horizontal unlimited scroller to showcase items on your site? Here I have discussed how it can be achieved,

First of all HTML, 

You can horizontally place list items by floating the list items to left and dynamically assign the container's width to product of number of items and width of individual item. This should look something like

.friends-list li{
  float: left;
}

$('.friends-list').width($('.friends-list>li').length * 180); // 180 is the width of each item

That done and some css to remove vertical scroll and add horizontal scroll to the container of the list, looks something like,

.friends{
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

To convert mousewheel scroll to scroll content horizontally instead of vertically we require.

1. jQuery
2. jQuery.Mouswheel Plugin

$('.friends-list').mousewheel(function(e){
    if(e.originalEvent.wheelDelta < 0){
         $('.friends').scrollLeft($('.friends').scrollLeft()+50);
       }else{
         $('.friends').scrollLeft($('.friends').scrollLeft()-50);
     }
   });