JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div data-role="carousel">
        <i class="fa fa-arrow-left"></i>
        <i class="fa fa-arrow-right"></i>
        <div class="gutter"></div>
        <div class="gutter gutter-right"></div>
        <ul>
            <li>(1)
                <p>
                    Phasellus porttitor ex nibh, bibendum dictum augue sollicitudin a.
                    Curabitur vel lectus mi. Sed sit amet urna lectus. Morbi nibh nunc,
                    gravida a ultrices in, tincidunt cursus ipsum. Phasellus nec justo ipsum.
                    Sed cursus justo et ullamcorper porttitor. Fusce fermentum sapien purus.
                </p>
            </li>
            <li>(2)
                <p>
                    Donec bibendum egestas elit, ut sollicitudin lacus bibendum vitae.
                    Etiam hendrerit nisl sed pulvinar laoreet. Curabitur id mi arcu.
                    Quisque accumsan placerat orci sit amet luctus. Nam odio risus,
                    tempus quis metus ac, pretium varius tortor. Duis ornare ante tellus,
                    fermentum gravida metus congue quis. Donec tempor, diam a consectetur
                    sollicitudin, velit libero maximus nibh, et congue elit tortor eget ex.
                    Integer eget arcu in sem mollis volutpat. Nunc congue convallis sem, a
                    luctus nulla suscipit accumsan. Integer porta, metus eget pretium semper,
                    felis magna maximus purus, ac sollicitudin lorem dolor a justo.
                </p>
                <p>
                    Curabitur ut dictum ipsum. Curabitur tincidunt viverra lectus ac...

CSS

div[data-role="carousel"] {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #beb;
    overflow: hidden;
}
div[data-role="carousel"] .fa-arrow-left,
div[data-role="carousel"] .fa-arrow-right {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 15px;
    box-shadow: 0 0 6px #aaa;
    height: 30px;
    left: 5px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 60px;
    width: 30px;
    cursor: pointer;
    z-index: 100;
}
div[data-role="carousel"] .fa-arrow-right {
    left: auto;
    right: 5px;
}
div[data-role="carousel"] ul {
    list-style: outside none none;
    margin: 0 0 0 35px;
    padding: 0;
    text-align: justify;
    overflow: hidden;
    /* scepll animation */
    -webkit-transition: margin-left 1s ease-in-out 0s;
       -moz-transition: margin-left 1s ease-in-out 0s;
        -ms-transition: margin-left 1s ease-in-out 0s;
         -o-transition: margin-left 1s ease-in-out 0s;
            transition: margin-left 1s ease-in-out 0s;
}
div[data-role="carousel"] ul li {
    float: left;
    margin: 0 15px;
    width: 200px;
}

JavaScript

window.addEventListener('load', function () {
    Array.prototype.slice.call(document.querySelectorAll('div[data-role="carousel"]')).forEach(function(carousel) {
        var list = carousel.querySelector('ul')
        var pages = list.querySelectorAll('li').length;
        var current = 0;
        var toLeft = carousel.querySelector('.fa-arrow-left');
        var toRight = carousel.querySelector('.fa-arrow-right');

        list.style.width = (pages * 230) + 'px'; // li.width + li.margin-(left+right)

        // 230 + 35, 35 = (300[carousel.width] - 230[li.width]) / 2[both side]
        var offset = 230;// start offset = 35, see CSS div[data-role="carousel"] ul
        toLeft.addEventListener('touchend', moveLeft);
        toLeft.addEventListener('click', moveLeft);
        toRight.addEventListener('touchend', moveRight);
        toRight.addEventListener('click', moveRight);

        function moveLeft() {
            if (current <= 0) {
                current = 0;
                return;
            }
            current--;
            list.style.marginLeft = (35 - offset * current) + 'px';
        }

        function moveRight() {
            if (current >= pages - 1) {
                current = pages;
                return;
            }
            current++;
            list.style.marginLeft = (35 - offset * current) + 'px';
        }
    });
});