Responsive jQuery Slider

Simple jQuery + CSS3 based responsive slider code licensed under MIT

by taragano

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="grid">
    <div class="slider-box">
        <div class="slider" id="slider">
            <div class="slider__item">
                <img src="http://res.cloudinary.com/demo/image/upload/sample.jpg" alt="">
            </div>
            <div class="slider__item">
                <img src="https://placeimg.com/960/540/arch" alt="">
            </div>
            <div class="slider__item">
                <img src="https://placeimg.com/960/540/nature" alt="">
            </div>
            <div class="slider__item">
                <img src="https://placeimg.com/960/540/people" alt="">
            </div>
            <div class="slider__item">
                <img src="https://placeimg.com/960/540/tech" alt="">
                <h2 class="slider__item__title">Slide 5 Title</h2>
            </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($) {

    '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', this.options.prev, (function(e) {
            this.$element.trigger('prev.slider');
        }).bind(this));

        this.$element.on('next.slider', this.next.bind(this));
        this.$document.on('click', this.options.next, (function(e) {
            this.$element.trigger('next.slider');
        }).bind(this));

       ...