JSFiddle - React, Tailwind, and code Playground

by Tim Ko

HTML

<article class="champions-container">
            <div class="champions-name-container"><label class="champions-name">Champions</label></div>
            <div class="wrapper">
                <div class="slide">
                    <div class="champion blue"><table class="quickstats"></table></div>
                    <div class="champion yellow"><table class="quickstats"></table></div>
                    <div class="champion green"><table class="quickstats"></table></div>
                    <div class="champion pink"><table class="quickstats"></table></div>
                    <div class="champion blue"><table class="quickstats"></table></div>
                    <div class="champion yellow"><table class="quickstats"></table></div>
                    <div class="champion green"><table class="quickstats"></table></div>
                    <div class="champion pink"><table class="quickstats"></table></div>
                </div>
            </div>

            <nav class="nav-buttons">
                <div class="goPrevious">&lsaquo;</div>
                <div class="goNext">&rsaquo;</div>
            </nav>

            <nav class="nav-bullets">
                <ul id="position">
                  <li class="bullet on" data-name="A"></li>
                  <li class="bullet" data-name="B"></li>
                  <li class="bullet" data-name="C"></li>
                  <li class="bullet" data-name="D"></li>
                </ul>
            </nav>
        </article>

CSS

/* Quickstats */
.champion {
    position: relative;
    float: left;
    top: 0px;
    width: 240px; /* */
    height: 245px;
}
.comment {
    font-size: 70%;
    white-space: nowrap;
}
.stats {
    overflow: scroll;
    max-width: 720px;
    margin-bottom: 24px;
}
.stats td {
    border-collapse: collapse;
    padding: 5px;
    height: 19px;
}
.stats tr td:first-of-type {
    width: 55%;
}
.stats tr {
    border-bottom: solid 1px #bfbfbf;
}
.stats tr:last-child {
    border-bottom: none;
}
.champions-container {
    position: relative;
}
.champions {
    overflow: scroll;
    max-width: 720px;
}
.champions td {
    border-collapse: collapse;
    width: 40%;
    padding: 5px;
    height: 19px;
}
.champions tr td:first-of-type {
    width: 55%;
}
.champions tr {
    border-bottom: solid 1px #bfbfbf;
}
.champions tr:nth-child(odd) {
    background-color: #f4f4f4;
}
.champions tr:nth-child(even) {
    background-color: #fafafa;
}
.champions tr:last-child {
    border-bottom: none;
}
.champions th {
    text-align: center;
    border-collapse: collapse;
    padding: 24px 0;
}
.wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    left: 0px;
    height: 245px;
}
.slide {
    position: absolute;
    top: 0px;
    width: 800%; /* 100% * numSlides */
    transition: left 0.3s, transform 2s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.slide-animation {
    -moz-transition: left 0.3s, -moz-transform 2s;
    -webkit-transition: left 0.3s, -webkit-transform 2s;
    -o-transition:width left 0.3s, -o-transform 2s;
}
.nav-buttons {
    position: absolute;
    top: 0px;
    width: 100%;
}
.champions-name-container {
    vertical-align: middle;
    text-align: center;
    height: 30px;
    padding-bottom: 5px;
}
.goPrevious, .goNext {
    position: absolute;
    font-style: normal !important;
    top: 110px;
    float: left;
  ...

JavaScript

// Carousel

var slide = 0;
var bufferSlides = 2;
var numSlides = $('.champion').length;
var realSlides = numSlides - 2 * bufferSlides;
var maxNumChampions = 10;

$('.bullet').on('click', function() {
    goToSlide($(this).index());
});

$('.goPrevious').on('click', function() {
    goToSlide(slide-1);
});

$('.goNext').on('click', function() {
    goToSlide(slide+1);
});

$('.wrapper').swipeLeft(function() {
    goToSlide(slide+1);
});

$('.wrapper').swipeRight(function() {
    goToSlide(slide-1);
});

$(window).on('resize', function() {
    setTimeout(function() {
        var slideWidth = -1 * parseInt($('.slide div').width());
        $('.slide').removeClass('slide-animation');
        $('.slide').css('left', slideWidth * (slide % numSlides));
    }, 1)
});

function goToSlide(n) {
    // slideWidth needs to be calculated each time in case the user switches between portrait/landscape
    var slideWidth = -1 * parseInt($('.slide div').width());
    
    if (n < 0) {
        console.log("Can't go farther left");
        // do nothing rather than loop around
        //$('.slide').removeClass('slide-animation');
        //$('.slide').css('left', slideWidth * realSlides);
        //slide = 3;
    } else if (n > maxNumChampions) {
        console.log("Can't go farther right");
        // do nothing rather than loop around
        //$('.slide').removeClass('slide-animation');
        //$('.slide').css('left', slideWidth * (realSlides - 1));
        //slide = 4;
    } else {
        console.log("Moved to slide " + n);
        slide = (n + numSlides) % numSlides;
    }
    
    setTimeout(function() {
        $('.slide').addClass('slide-animation');
        $('.champion-name').html($('.bullet').eq(slide % realSlides).data('name'));
        $('.bullet.on').removeClass('on');
        $('.bullet').eq(slide % realSlides).addClass('on');
        $('.slide').css('left', slideWidth * (slide % numSlides));
    }, 301);
}