JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<ul>
    <li class="focused">item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

CSS

body {
    overflow: hidden;
}
.slide {
    width: 400px;
    border: 1px solid #333;
    height: 300px;
    background: #ccc;
    position: absolute;
    left: -402px;
    top: 100px;
}
ul {
    list-style-type: none;
    margin: 0 auto 0 auto;
    padding: 0;
    width: 280px;
    height: 30px;
}
li {
    float: left;
    width: 50px;
    padding: 10px;
    background: #ccc;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
li:hover {
    color: #fff;
}
li.focused {
    color: #fff;
    cursor: default;
    background: #333;
}

JavaScript

$(document).ready(function () {

    $('.active').css('left', ($(window).width() - $('.active').outerWidth()) / 2);

    $('li').click(function () {
        $('li.focused').removeClass('focused');
        $(this).addClass('focused');
        var ind = $(this).index(),
            activeSlide = $('.active'),
            slide = $('.slide').eq(ind);
        if (!slide.hasClass('active')) {
            slide.stop().animate({
                'left': ($(window).width() - slide.outerWidth()) / 2
            }, 300);
            activeSlide.animate({
                'left': $(window).width()
            }, 300, function () {
                activeSlide.css('left', -activeSlide.outerWidth());
            });
            activeSlide.removeClass('active');
            slide.addClass('active');
        }
    });

    $(window).resize(function () {
        $('.active').css('left', ($(window).width() - $('.active').outerWidth()) / 2);
    });

});