JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Loads jQuery libary from googles server -->
<script src="https://raw.github.com/technoweenie/jquery.doubletap/master/lib/jquery.doubletap.js" type="text/javascript" charset="utf-8"></script>
    <!-- Load the jQuery easing plugin from your server. download it here > http://gsgd.co.uk/sandbox/jquery/easing/ -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>    
<script src="http://www.musca.se/full-window-width-jquery-tools-content-slider-demo/assets/scripts/jquery.easing.min.js"></script>    

    
    <h1>Simplified full window width content slider demo.</h1>
    
    <div id="slider">
        <div style="left: -1903px;" id="items">
            <!-- slide 1 -->
            <div style="width: 1903px;">
               <div class="content">
                       <p>
                        Look at the source code to get more info.
                        Read more about scrollable settings at the. <a href="http://jquerytools.org/documentation/scrollable/index.html" target="_blank">scrollable web page</a>
                    </p>
               </div>
            </div>
            
            <!-- slide 2 -->
            <div style="width: 1903px;">
                  <div class="content">
                    <p>Some more content in slide 2</p>
                </div>
            </div>
            
            <!-- slide 3 -->
            <div style="width: 1903px;">
                  <div class="content">
                    <p>And even more content in slide 3</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Slider Navigation -->
    <div id="navigation-wrapper">
        <span class="prev">&lt; Previous slide</span>
        <ul id="navigation">
            <li class="active">slide 1</li>
            <li>slide 2</li>
            <li>slide 3</li>
        </ul>
        <span class="next">Next slide &gt;</span>
    </div>

CSS

/* slider styles */    
        #slider{
            width: 960px;
            height: 360px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .JS #slider{
            width: 100%;
            min-width: 960px;
            margin:0;
        }
        #items{
            width: 2000em;
            position: absolute;
            /* hardware acceleration */
            -moz-transform:rotateX( 0deg );
            -webkit-transform:rotateX( 0deg );
        }
        #items > div{
            float: left;
        }
        #items > div > div{
            width: 960px;
            height: 360px;
            margin: 0 auto;
            overflow: hidden;
            background-color: #333;
        }

        /* navigation code */
        #navigation-wrapper{
            display: none;
        }
        .JS #navigation-wrapper{
            display: block;
            width: 960px;
            margin: 20px auto;
            text-align: center;
        }
        ul#navigation{
            width: 330px;
            margin: 0 auto;
        }
        ul#navigation li{
            width: 100px;
        }
        ul#navigation li, .prev, .next{
            padding: 5px;
            display: block;
            color: blue;
        }
        ul#navigation li, .prev{
            float: left;
        }
        .next{
            float: right;
        }
        #navigation-wrapper span:hover, ul#navigation li:hover{
            cursor: pointer;
            color: red;
        }
         ul#navigation li.active, ul#navigation li.active:hover{
            background-color: #ccc;
            color: blue;
            cursor: default;
        }

JavaScript

//SWIPE left right only

$.fn.handleSwipes = function() {
  return this.each(function() {
    var api = $(this).data("scrollable");

    api.getRoot().addSwipeEvents()
       .bind('swipeleft', function() {
         api.next();
       })
       .bind('swiperight', function() {
         api.prev();
       });
  });
};


/* 
         Full window width content slider by Oskar Engdahl
         http://www.musca.se/full-window-width-jquery-tools-content-slider-demo/

         This code is licensed under GPL and free to use. 
         http://www.gnu.org/licenses/gpl.html
        */
        $(function() {
            // Adds a class to the html code so we can target browsers without JS.
            $('html').addClass('JS');
            // Sets the slides width on page load
            var i = $(window).width();
            if (i > 959){ $('#items > div').css({ width: i }); }
            
            // Scrollable and navigator plugin settings.
            $("#slider").scrollable({
                circular: true,
                easing: 'easeOutQuad', 
                speed: 900,
                touch: false,                    
            }).handleSwipes().navigator({ 
                navi: '#navigation' 
            }).autoscroll({ 
                autoplay: false, // For autoplay change to: true 
                autopause: false, // Pauses autoscroll when hovering the slider or navigation. 
                interval: 5000 // Time bettwen scrolling 
            });
            
            // Window resize code
            window.api = $("#slider").data("scrollable");
            $(window).resize(function() {
                var a = 1 + window.api.getIndex(); //take away: 1 +  if you have, circular: false 
                var w = $(window).width();
                if (w > 959) {
                    var l = a * w
                    $('#items').css({ left: + - +l });
                    $('#items > div').css({ width: w });
                } else {
                   ...