JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<div class="grid">
    <div class="slider-box">
        <div class="slider" id="slider2">
            <div class="slider__item">
                <img src="https://cloudinary-res.cloudinary.com/image/upload/w_500,c_fill,f_auto,q_auto,dpr_2.0/page_designer_1.png" alt="landscape">
            </div>
            <div class="slider__item">
                <img src="https://cloudinary-res.cloudinary.com/image/upload/w_500,c_fill,f_auto,q_auto,dpr_2.0/page_designer_2.png" alt="vertical">
            </div>
            <div class="slider__item">
                <img src="https://cloudinary-res.cloudinary.com/image/upload/w_500,c_fill,f_auto,q_auto,dpr_2.0/page_designer_3.png" alt="square">
            </div>
                    </div>
        <div class="slider-nav">
            <div class="slider-nav__prev" id="prev"><i class="fa fa-angle-left"></i></div>
            <div class="slider-nav__next" id="next"><i class="fa fa-angle-right"></i></div>
            <div class="slider-nav__dots" id="dots"></div>
        </div>
    </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Candal);

/*
A super simple jQuery slider plugin

Table of contents

1.0 - Typography
2.0 - Elements
3.0 - Grid
4.0 - Slider
	4.1 - Slider Nav
*/


/*
1.0 - Typography
*/

h1,
h2 {
    font-family: Candal, sans-serif;
    line-height: 1.2;
}


/*
2.0 - Elements
*/

img {
    max-width: 100%;
    height: auto;
}


/*
3.0 - Grid
*/

.grid {
    max-width: 960px;
    margin: auto;
}


/*
4.0 - Slider
*/

.slider-box,
.slider__item {
    position: relative;
}

.slider {
    overflow: hidden;
}

.slider__canvas {
    transition: transform 0.5s;
}

.slider__item {
    float: left;
}

.slider__item__title {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    margin: 0;
    color: #468;
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s, transform 0.3s;
    transform: translate3d(-50%, -60%, 0);
}

.active .slider__item__title {
    opacity: 1;
    transition-delay: 0.5s;
    transform: translate3d(-50%, -50%, 0);
}

@media(min-width: 48rem) {
    .slider__item__title {
        font-size: 5rem;
    }
}


/*
4.1 - Slider Nav
*/

.slider-nav {
    color: #fff;
    font-size: 1rem;
    text-align: center;
}

.slider-nav__dots {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.slider-nav__prev,
.slider-nav__next,
.slider__dot {
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px;
    cursor: pointer;
    backface-visibility: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.slider-nav__prev,
.slider-nav__next {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    line-height: 3rem;
}

.slider-nav__prev {
    left: 7%;
}

.slider-nav__next {
    right: 7%;
}

.slider__dot {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin: 0...

JavaScript

function insertScript(src, callback) {
  var script = document.createElement('script');
  script.onload = callback;
  script.type = 'text/javascript';
  script.async = true;
  script.src = src;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(script, s);
 }
 insertScript('/javascripts/jquery.min.js', function(){

    'use strict';

    var pluginName = 'slider',
        defaults = {
            next: '.slider-nav__next',
            prev: '.slider-nav__prev',
            item: '.slider__item',
            dots: false,
            dotClass: 'slider__dot',
            autoplay: false,
            autoplayTime: 3000,
        };

    function slider(element, options) {
        this.$document = $(document);
        this.$window = $(window);
        this.$element = $(element);
        this.options = $.extend({}, defaults, options);
        this.init();
    };

    slider.prototype.init = function() {
        this.setup();
        this.attachEventHandlers();
        this.update();
    };

    slider.prototype.setup = function(argument) {
        this.$slides = this.$element.find(this.options.item);
        this.count = this.$slides.length;
        this.index = 0;

        this.$next = $(this.options.next);
        this.$prev = $(this.options.prev);

        this.$canvas = $(document.createElement('div'));
        this.$canvas.addClass('slider__canvas').appendTo(this.$element);
        this.$slides.appendTo(this.$canvas);

        this.$dots = $(this.options.dots);
        this.$dots.length && this.createDots();
    };

    slider.prototype.createDots = function() {
        var dots = [];
        for (var i = 0; i < this.count; i += 1) {
            dots[i] = '<span data-index="' + i + '" class="' + this.options.dotClass + '"></span>';
        }
        this.$dots.append(dots);
    }

    slider.prototype.attachEventHandlers = function() {
        this.$element.on('prev.slider', this.prev.bind(this));
        this.$document.on('click',...