Horizontal Slider

Attempt to build a nice looking horizontal slider.

by Daniel Flores

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<ul class="image-slider">
            <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_1_thumbnail.jpg">
            </a>
        </li>
            <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_2_thumbnail.jpg">
            </a>
        </li>
            <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_3_thumbnail.jpg">
            </a>
        </li>
            <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_4_thumbnail.jpg">
            </a>
        </li>
            <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_5_thumbnail.jpg">
            </a>
        </li>
            <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_6_thumbnail.jpg"></img>
            </a>
        </li>
                <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_6_thumbnail.jpg"></img>
            </a>
        </li>
                <li>
            <a href="#">
                <img class="img-responsive" src="http://s3-us-west-1.amazonaws.com/vcs-storage/samples/a4/f2/36/260/capture_6_thumbnail.jpg"></img>
            </a>
        </li>
                <li>
           ...

CSS

.image-slider {
    width: 100%;
    height: 100px;
    background-color: #CCC;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-left: 0;
    list-style: none;
    font-size: 0px;
}

.image-slider li {
    display: inline-block;
    height: 100px;
    overflow: hidden;
}