Horizontally scrollable panels

sans JS

by tonytlwu

HTML

<div class="list">
    <ul>
        <li><img src="http://lorempixel.com/400/300" /></li>
        <li><img src="http://lorempixel.com/400/300" /></li>
        <li><img src="http://lorempixel.com/400/300" /></li>
        <li><img src="http://lorempixel.com/400/300" /></li>
        <li><img src="http://lorempixel.com/400/300" /></li>
        <li><img src="http://lorempixel.com/400/300" /></li>
    </ul>
</div>

CSS

.list {
    width: 100%;
    /* Mask image with 10px padding */
    -webkit-mask: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAQAAAAs9P32AAAALElEQVR4Ae3BMRGAMBRAsYd/k9C7Dn/DAXXBlOTqC/gXAADA27Rb3T2tdnMA+HsJEmDt95QAAAAASUVORK5CYII=') repeat-y right top;
    mask: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAQAAAAs9P32AAAALElEQVR4Ae3BMRGAMBRAsYd/k9C7Dn/DAXXBlOTqC/gXAADA27Rb3T2tdnMA+HsJEmDt95QAAAAASUVORK5CYII=') repeat-y right top;
    /* Mask image with 15px padding */
    -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAQAAAAs9P32AAAAL0lEQVR4Ae3BtwGAMADAMPP/pZBe1/BFJksPB0mSJEmSdMNmUMkkIoGPSCSRqYwfZpQODKoMHvcAAAAASUVORK5CYII=');
    mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAQAAAAs9P32AAAAL0lEQVR4Ae3BtwGAMADAMPP/pZBe1/BFJksPB0mSJEmSdMNmUMkkIoGPSCSRqYwfZpQODKoMHvcAAAAASUVORK5CYII=');
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

ul {
    margin: 0;
    list-style: none;
    padding: 0;
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
}

li {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>