JSFiddle - React, Tailwind, and code Playground

by Alexus fox

HTML

<html lang="en">



<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="In this lab, we make a responsive content slider jQuery plugin" />
<title>A Responsive Content Slider jQuery Plugin</title>
    
<!-- css -->

    
<!-- js -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.cslide.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#cslide-slides").cslide();
});
</script>






<body>

<div id="wrapper">

<div id="top-bar">
    <div class="container clearfix">
        <span class="all-labs"><a href="http://www.callmenick.com/labs">&larr; all labs</a></span>
        <span class="back-to-tutorial"><a href="http://www.callmenick.com/labs/responsive-content-slider">back to the tutorial</a></span>
    </div>
</div><!-- /#top-bar -->

<header>
    <div id="title" class="container">
        <h1>Responsive Content Slider</h1>
        <h2>A responsive content slider jQuery plugin</h2>
    </div>
</header><!-- /header -->


<div id="main">
    <div class="container">
        <section id="cslide-slides" class="cslide-slides-master clearfix">
            <div class="cslide-prev-next clearfix">
                <span class="cslide-prev">prev slide</span>
                <span class="cslide-next">next slide</span>
            </div>
            <div class="cslide-slides-container clearfix">
                <div class="cslide-slide">
                    <h2>This is slide 1</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et...

CSS

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

body {
  line-height: 1; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: normal; }

ol, ul {
  list-style: none; }

blockquote {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {
  border: none; }

/* =Global
-------------------------------------------------------------- */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background-color: steelblue;
  color: #505050;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  font-weight: 300; }

a {
  text-decoration: none;
  color: steelblue; }

a:hover {
  color: #315a7d; }

/* =Template
-------------------------------------------------------------- */
#wrapper {
  width: 100%;
  margin: 0 auto; }

#main {
  background-color: #fff;
  padding: 30px 0; }

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 30px; }

/* =Top Bar
-------------------------------------------------------------- */
#top-bar {
  background-color: #38678f; }

#top-bar a {
  color: white;
  font-size: 14px;
  text-transform:...

JavaScript

(function($) {

    $.fn.cslide = function() {

        this.each(function() {

            var slidesContainerId = "#"+($(this).attr("id"));
            
            var len = $(slidesContainerId+" .cslide-slide").size();     // get number of slides
            var slidesContainerWidth = len*100+"%";                     // get width of the slide container
            var slideWidth = (100/len)+"%";                             // get width of the slides
            
            // set slide container width
            $(slidesContainerId+" .cslide-slides-container").css({
                width : slidesContainerWidth,
                visibility : "visible"
            });

            // set slide width
            $(".cslide-slide").css({
                width : slideWidth
            });

            // add correct classes to first and last slide
            $(slidesContainerId+" .cslide-slides-container .cslide-slide").last().addClass("cslide-last");
            $(slidesContainerId+" .cslide-slides-container .cslide-slide").first().addClass("cslide-first cslide-active");

            // initially disable the previous arrow cuz we start on the first slide
            $(slidesContainerId+" .cslide-prev").addClass("cslide-disabled");

            // if first slide is last slide, hide the prev-next navigation
            if (!$(slidesContainerId+" .cslide-slide.cslide-active.cslide-first").hasClass("cslide-last")) {           
                $(slidesContainerId+" .cslide-prev-next").css({
                    display : "block"
                });
            }

            // handle the next clicking functionality
            $(slidesContainerId+" .cslide-next").click(function(){
                var i = $(slidesContainerId+" .cslide-slide.cslide-active").index();
                var n = i+1;
                var slideLeft = "-"+n*100+"%";
                if (!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-last")) {
                   ...