JSFiddle - React, Tailwind, and code Playground

by tbergeron

HTML

<ul class="lists slider1">
                    <li class="item channel_slide">
                        <a href="#">
                            <img src="http://www.unotelly.com/test/assets/images/channels-hbo.png" class="channel-item-img"/>
                        </a>
                    </li>
                    <li class="item channel_slide">
                        <a href="#">
                            <img src="http://www.unotelly.com/test/assets/images/channels-disney.png" class="channel-item-img"/>
                        </a>
                    </li>
                    <li class="item channel_slide">
                        <a href="#">
                            <img src="http://www.unotelly.com/test/assets/images/channels-netflex.png" class="channel-item-img"/>
                        </a>
                    </li>
                    <li class="item channel_slide">
                        <a href="#">
                            <img src="http://www.unotelly.com/test/assets/images/channels-abc.png" class="channel-item-img"/>
                        </a>
                    </li>
                    <li class="item channel_slide">
                        <a href="#">
                            <img src="http://www.unotelly.com/test/assets/images/channels-aertv.png" class="channel-item-img"/>
                        </a>
                    </li>
                    <li class="item channel_slide">
                        <a href="#">
                            <img src="http://www.unotelly.com/test/assets/images/channels-aertv.png" class="channel-item-img"/>
                        </a>
                    </li>
                    <li class="item channel_slide">
                        <a href="#">
                            <img src="http://www.unotelly.com/test/assets/images/channels-aertv.png" class="channel-item-img"/>
                        </a>
                    </li>
                </ul>
                <ul class="lists slider2">
  ...

CSS

ul.lists {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-animation: moveSlideshow 180s linear infinite;
    -moz-animation:    moveSlideshow 180s linear infinite;
}

ul.lists li {
    list-style: none;
    display: inline-block;
}

ul.lists li img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

ul.slider2 {
    top: 140px;
}

ul.slider3 {
    top: 280px;
}

@-webkit-keyframes moveSlideshow {
    0%   {
        -webkit-transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-300%);
    }
}
@-moz-keyframes moveSlideshow {
    0%   {
        -moz-transform:    translateX(0);
    }
    100% {
        -moz-transform:    translateX(-300%);
    }
}