Horizontal scroller

by iSiddharthGiri

HTML

<script src="http://up.hkbot.io/f/aotik/scroll.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<div class="selector-page">
<div class="selector">
 <ul>
  <li>
  <img src="http://www.clker.com/cliparts/5/7/4/8/13099629981030824019profile.svg.med.png" height="90">
  <h5>Admin</h5>
  <p>In charge of managing users and content within the team</p>
  </li>
  <li>
  <img src="http://www.clker.com/cliparts/5/7/4/8/13099629981030824019profile.svg.med.png" height="90">
  <h5>Admin</h5>
  <p>In charge of managing users and content within the team</p>
  </li>
    <li>
  <img src="http://www.clker.com/cliparts/5/7/4/8/13099629981030824019profile.svg.med.png" height="90">
  <h5>Admin</h5>
  <p>In charge of managing users and content within the team</p>
  </li>
    <li>
  <img src="http://www.clker.com/cliparts/5/7/4/8/13099629981030824019profile.svg.med.png" height="90">
  <h5>Admin</h5>
  <p>In charge of managing users and content within the team</p>
  </li>
    <li>
  <img src="http://www.clker.com/cliparts/5/7/4/8/13099629981030824019profile.svg.med.png" height="90">
  <h5>Admin</h5>
  <p>In charge of managing users and content within the team</p>
  </li>
 </ul>
</div>
</div>

CSS

.selector-page ul li:hover {
 background-color: #f8f8f6;
}

.selector-page ul li h5 {
 font-size: 22px;
 margin-top: 19px;
}

.selector-page ul li p {
 font-size: 14px;
 margin: 0;
}

.selector-page ul li.selected {
 background-color: #baefb3;
     box-shadow: inset 0 0 0 1px #30c51d;
}
.selector-page ul li + li {
 margin-left: 10px;
}
.selector-page ul li {
 text-align: center;
 display: inline-block;
 max-width: 250px;
 padding: 30px 20px;
 border-radius: 4px;
 white-space: normal;
}

.selector-page ul {
 font-size: 0;
 list-style: none;
 padding: 25px 0;
 display: inline-block;
 white-space: nowrap;
}

.selector-page {
 font-family: "Lato", sans-serif;
}

.selector {
 max-width: 100%;
 overflow: scroll;
 width: 100%;
 display: block;
}

JavaScript

$('.selector ul li').click( function() {
  $('.selector ul li').removeClass('selected');
  $(this).addClass('selected');
});
$(document).ready(function () {
    $('.selector').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
    
    });