Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<a href="https://github.com/codezero-be/jquery-slider" class="github-corner" aria-label="View source on Github">
    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg>
</a>

<h1>Responsive jQuery Slider Demo</h1>

<p>
    <a href="https://github.com/codezero-be/jquery-slider" target="_blank">View source on Github</a> -
    <a href="https://codepen.io/ivanvermeyen/pen/yMWvOR" target="_blank">Tinker with CodePen</a>
</p>

<h2>Basic Slider</h2>

<h3>Auto width...</h3>

<div class="slider">

    <a href="#" class="slider-prev">&langle;</a>
    <a href="#" class="slider-next">&rangle;</a>

    <div class="slider-viewport">
        <div class="slider-track">

            <div class="slide" data-background="https://unsplash.it/500/200/" style="padding: 0 1em;">
                <h1>Hello World</h1>
                <p>Without overlay and zoom!</p>
            </div>

            <div class="slide" data-background="https://unsplash.it/501/200/">
                <div class="slide-overlay" style="padding: 0 1em;">
                    <h1>Hello World</h1>
                    <p>With overlay!</p>
                </div>
            </div>

            <div class="slide" data-zoom-background="https://unsplash.it/502/200/" style="padding: 0 1em;">
                <h1>Hello World</h1>
                <p>With zoom!</p>
            </div>

            <div class="slide" data-zoom-background="https://unsplash.it/503/200/">
                <div class="slide-overlay" style="padding: 0 1em;">
                    <h1>Hello World</h1>
                    <p>With overlay and zoom!</p>
                </div>
            </div>

        </div>
    </div>

</div>

<h3>Full width...</h3>

<div class="slider slide-full-width">

    <a href="#" class="slider-prev">&langle;</a>
    <a href="#" class="slider-next">&rangle;</a>

    <div class="slider-viewport">
        <div class="slider-track">

            <div class="slide" data-background="https://unsplash.it/500/200/" style="padding: 0 1em;">
                <h1>Hello World</h1>
                <p>Without overlay and zoom!</p>
            </div>

            <div class="slide" data-background="https://unsplash.it/501/200/">
                <div class="slide-overlay" style="padding: 0 1em;">
                    <h1>Hello World</h1>
                    <p>With overlay!</p>
                </div>
            </div>

            <div class="slide" data-zoom-background="https://unsplash.it/502/200/" style="padding: 0 1em;">
                <h1>Hello World</h1>
                <p>With zoom!</p>
            </div>

            <div class="slide" data-zoom-background="https://unsplash.it/503/200/">
                <div class="slide-overlay" style="padding: 0 1em;">
                    <h1>Hello World</h1>
                    <p>With overlay and zoom!</p>
                </div>
            </div>

        </div>
    </div>

</div>

<h2>Image Slider</h2>

<p>
    This example uses an anchor tag as a slide-image wrapper, but you could also use a simple div.<br>
    You can also add a lightbox of your choice!
</p>

<h3>Auto width inline images...</h3>

<p>Each slide has a different combination of effects.</p>

<div class="slider">

    <a href="#" class="slider-prev">&langle;</a>
    <a href="#" class="slider-next">&rangle;</a>

    <div class="slider-viewport">
        <div class="slider-track">

            <!-- No hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <img src="https://unsplash.it/210/200/">
                </a>
            </div>

            <!-- Icon hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <i class="fa fa-search-plus slide-image-hoverlay"></i>
                    <img src="https://unsplash.it/510/200/">
                </a>
            </div>

            <!-- Text hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <span class="slide-image-hoverlay">VIEW ME</span>
                    <img src="https://unsplash.it/310/200/">
                </a>
            </div>

            <!-- No hoverlay, only caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <img src="https://unsplash.it/610/200/">
                    <span class="slide-image-caption">
                        Image caption here!
                    </span>
                </a>
            </div>

            <!-- Both hoverlay and caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <i class="fa fa-search-plus slide-image-hoverlay"></i>
                    <img src="https://unsplash.it/410/200/">
                    <span class="slide-image-caption">
                        Image caption here!
                    </span>
                </a>
            </div>

        </div>
    </div>

</div>

<h3>Full width inline images...</h3>

<p>Each slide has a different combination of effects.</p>

<div class="slider slide-full-width">

    <a href="#" class="slider-prev">&langle;</a>
    <a href="#" class="slider-next">&rangle;</a>

    <div class="slider-viewport">
        <div class="slider-track">

            <!-- No hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <img src="https://unsplash.it/210/200/">
                </a>
            </div>

            <!-- Icon hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <i class="fa fa-search-plus slide-image-hoverlay"></i>
                    <img src="https://unsplash.it/510/200/">
                </a>
            </div>

            <!-- Text hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <span class="slide-image-hoverlay">VIEW ME</span>
                    <img src="https://unsplash.it/310/200/">
                </a>
            </div>

            <!-- No hoverlay, only caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <img src="https://unsplash.it/610/200/">
                    <span class="slide-image-caption">
                        Image caption here!
                    </span>
                </a>
            </div>

            <!-- Both hoverlay and caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <i class="fa fa-search-plus slide-image-hoverlay"></i>
                    <img src="https://unsplash.it/410/200/">
                    <span class="slide-image-caption">
                        Image caption here!
                    </span>
                </a>
            </div>

        </div>
    </div>

</div>

<h3>Covered width background images...</h3>

<p>Each slide has a different combination of effects.</p>

<div class="slider slide-cover-width">

    <a href="#" class="slider-prev">&langle;</a>
    <a href="#" class="slider-next">&rangle;</a>

    <div class="slider-viewport">
        <div class="slider-track">

            <!-- No hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <img src="https://unsplash.it/811/200/" class="slide-image-background">
                </a>
            </div>

            <!-- Icon hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <i class="fa fa-search-plus slide-image-hoverlay"></i>
                    <img src="https://unsplash.it/812/200/" class="slide-image-background">
                </a>
            </div>

            <!-- Text hoverlay, no caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <span class="slide-image-hoverlay">VIEW ME</span>
                    <img src="https://unsplash.it/813/200/" class="slide-image-background">
                </a>
            </div>

            <!-- No hoverlay, only caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <img src="https://unsplash.it/814/200/" class="slide-image-background">
                    <span class="slide-image-caption">
                        Image caption here!
                    </span>
                </a>
            </div>

            <!-- Both hoverlay and caption -->
            <div class="slide">
                <a href="#" class="slide-image">
                    <i class="fa fa-search-plus slide-image-hoverlay"></i>
                    <img src="https://unsplash.it/815/200/" class="slide-image-background">
                    <span class="slide-image-caption">
                        Image caption here!
                    </span>
                </a>
            </div>

        </div>
    </div>

</div>

<h3>Single image</h3>

<p>If the image does not fit the viewport, it will be cropped.</p>

<div class="slider">

    <a href="#" class="slider-prev">&langle;</a>
    <a href="#" class="slider-next">&rangle;</a>

    <div class="slider-viewport">
        <div class="slider-track">

            <div class="slide">
                <div class="slide-image">
                    <span class="slide-image-hoverlay">TEXT</span>
                    <img src="https://unsplash.it/600/200/">
                </div>
            </div>

        </div>
    </div>

</div>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Gentium+Basic');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');

.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}


html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    font-family: 'Gentium Basic', serif;
    font-size: 18px;
    text-align: center;
    padding-bottom: 100px;
}


.slider {
    margin-bottom: 20px;
}

// ==========================
// Begin slider styles
// ==========================

//
// Slider
//

// slides alignment
$track-vertical-align: center !default; //=> choose: center, flex-start (top) or flex-end (bottom)

// slides alignment if all slides fit in the viewport
$track-no-slide-horizontal-align: center !default; //=> choose: center, flex-start (left) or flex-end (right)
$track-no-slide-vertical-align: $track-vertical-align !default; //=> choose: center, flex-start (top) or flex-end (bottom)

//
// Slides
//

// slide content alignment
$slide-horizontal-align: center !default; //=> choose: center, flex-start (left) or flex-end (right)
$slide-vertical-align: center !default; //=> choose: center, flex-start (top) or flex-end (bottom)

// slide dimensions and spacing
$slide-width: auto !default; // choose: auto or any width (in pixels or percentage of viewport)
$slide-max-width: 100% !default; // choose: none (allow any width), 100% (crop slides to fit viewport) or any other width
$slide-height: auto !default; // choose: auto or any height (in pixels)
$slide-margin: 0 !default; // space between 2 slides

// slide default text color
$slide-text-color: #ffffff !default;

// default slide background
$slide-background: transparent !default; //=> choose: transparent or any value

// when using data-background to set background images, the default slide background will be on top of the image
// set this option to use a different background in this case (like a default overlay color)
// you can also use $slide-background-overlay with a .slide-overlay in specific slides
$slide-data-background: transparent !default; //=> choose: transparent or any value

// background zoom when using data-zoom-background
$slide-data-background-transform-hover: scale(1.1) !default; //=> choose: none or any transform
$slide-data-background-transform-speed: 300ms !default;

// background for optional slide-overlay div
// this is meant to be placed in a content slider
$slide-background-overlay: rgba(0,0,0,.5) !default; //=> choose: transparent or any value

//
// Default slide image styles
//

// include the default slide image CSS?
$include-default-slide-image-styles: true !default;

// the image max height will determine the slider height
// if $slide-height is set to auto.
$slide-image-max-height: $slide-height !default; //=> choose: none or any value

@if ($slide-height == auto) {
    $slide-image-max-height: none !default; //=> choose: none or any value
}

// zoom the image on hover
$slide-image-transform-hover: scale(1.1) !default; //=> choose: none or any transform
$slide-image-transform-speed: 300ms !default;

// text align inside .slide-image
$slide-image-text-align: center !default; //=> choose: left, center, right

// image hover overlay styles
$slide-image-hoverlay-color: rgba(255,255,255,.8) !default;
$slide-image-hoverlay-background: rgba(0,0,0,.3) !default;
$slide-image-hoverlay-font-size: 30px !default;
$slide-image-hoverlay-fade-in-speed: 400ms !default;

// image caption styles
$slide-image-caption-color: #ffffff !default;
$slide-image-caption-background: rgba(0,0,0,.4) !default;
$slide-image-caption-font-size: 14px !default;
$slide-image-caption-padding: .8em !default;
$slide-image-caption-speed: 300ms !default; //=> slide up / down
$slide-image-single-line: true !default; //=> if true, long captions will be truncated

//
// Default arrow styles
//

// include the default arrow CSS?
$include-default-arrow-styles: true !default;

// should the arrows be placed over the slides
// or should we add padding to the slider to prevent the overlap?
$place-arrows-over-slides: true !default;

// hide the previous arrow when at the start of the slider
// and the next arrow when at the end of the slider?
$hide-arrows-at-end-of-track: true !default;

// arrow styles
$arrow-box-width: 30px !default;
$arrow-font-size: 30px !default;
$arrow-transition: width 300ms ease 400ms, background 300ms, color 300ms !default;

// normal colors
$arrow-box-background: rgba(0,0,0,.3) !default;
$arrow-color: #ffffff !default;

// hover colors
$arrow-box-background-hover: rgba(0,0,0,.6) !default;
$arrow-color-hover: #ffdd8a !default;

// end of track colors
$arrow-box-background-end: $arrow-box-background !default;
$arrow-color-end: #7e7e7e !default;

.slider {
    position: relative;

    &-viewport {
        position: relative;
        overflow: hidden;
    }

    &-track {
        position: relative; //=> !! important for sliding to the correct position !!
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: $track-vertical-align; //=> vertical alignment of slides if they have variable heights
    }

    // alignment of slides if they all fit in the viewport
    &.no-slide &-track {
        justify-content: $track-no-slide-horizontal-align;
        align-items: $track-no-slide-vertical-align;
    }
}

.slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: $slide-vertical-align;
    align-items: $slide-horizontal-align;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    max-width: $slide-max-width; //=> don't let slides be wider than the viewport
    flex-basis: $slide-width; //=> optional fixed slide width (px or % of viewport)
    height: $slide-height; //=> optional fixed slide height
    background: $slide-background;
    color: $slide-text-color;
    transform: translateZ(0); //=> avoid flickering

    + .slide {
        margin-left: $slide-margin;
    }

    &-overlay {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: $slide-vertical-align;
        align-items: $slide-horizontal-align;
        width: 100%;
        background: $slide-background-overlay;
    }

    &-full-width, &-cover-width {
        .slide, &.slide {
            flex-basis: 100%;
        }
    }

    &-data-background {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        transition: transform $slide-data-background-transform-speed;
    }

    &:hover &-data-zoom-background {
        transform: $slide-data-background-transform-hover;
    }

    &[data-background], &[data-zoom-background] {
        background: $slide-data-background;
    }
}

// This is just an example.
// You can style the image any way you like.

@if $include-default-slide-image-styles == true {

    .slide {
        margin-left: -1px; //=> fix random spacing between slides
        margin-right: -1px; //=> fix random spacing between slides

        &-image {
            display: block;
            position: relative;
            text-align: $slide-image-text-align;
            transition: transform $slide-image-transform-speed;

            &:hover {
                transform: $slide-image-transform-hover;
            }

            &-caption {
                display: block;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                padding: $slide-image-caption-padding;
                text-decoration: none;
                font-size: $slide-image-caption-font-size;
                color: $slide-image-caption-color;
                background: $slide-image-caption-background;
                transition: transform $slide-image-caption-speed;

                @if $slide-image-single-line == true {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            &:hover &-caption {
                transform: translateY(100%);
            }

            &-hoverlay {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                z-index: 10;
                width: 0;
                overflow: hidden;
                color: $slide-image-hoverlay-color;
                font-size: $slide-image-hoverlay-font-size;
                background: $slide-image-hoverlay-background;
                transition: opacity $slide-image-hoverlay-fade-in-speed, width 0ms linear $slide-image-hoverlay-fade-in-speed;
                opacity: 0;
                transform: translateZ(0); //=> avoid flickering
            }

            &:hover &-hoverlay {
                transition: opacity $slide-image-hoverlay-fade-in-speed, width 0ms linear 0ms;
                width: 100%;
                opacity: 1;
            }

            img {
                vertical-align: middle;
                border: none; //=> IE 10 ¯\_(ツ)_/¯
                max-height: $slide-image-max-height;
            }

            &-background-wrapper {
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
            }

            &-background-wrapper &-background {
                opacity: 0;
            }
        }

        &-cover-width &-image {
            width: 100%;
        }
    }

}

// This is just an example.
// You can style the arrows any way you like.

@if $include-default-arrow-styles == true {

    .slider {

        @if $place-arrows-over-slides == false {
            padding-left: $arrow-box-width;
            padding-right: $arrow-box-width;
        }

        &-prev, &-next {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 100;
            width: $arrow-box-width;
            background: $arrow-box-background;
            font-size: $arrow-font-size;
            color: $arrow-color;
            text-decoration: none;
            transition: $arrow-transition;
            overflow: hidden;

            &:hover {
                background: $arrow-box-background-hover;
                color: $arrow-color-hover;
                text-decoration: none;
            }
        }

        &-prev { left: 0; }
        &-next { right: 0; }

        // arrow state when the slider is at the start
        &-start &-prev {
            background: $arrow-box-background-end;
            color: $arrow-color-end;

            @if $hide-arrows-at-end-of-track == true {
                width: 0;
            }
        }

        // arrow state when the slider is at the end
        &-end &-next {
            background: $arrow-box-background-end;
            color: $arrow-color-end;

            @if $hide-arrows-at-end-of-track == true {
                width: 0;
            }
        }

        // arrow state when all slides fit in the viewport
        &.no-slide &-prev, &.no-slide &-next {
            display: none;
        }
    }

}

              
            
!

JS

              
                (function ($, window, document, undefined) {

    var pluginName = 'slide',
        defaults = {
            // General settings...
            slideSpeed: 500,
            enableSwipe: true,

            // If you change class / data attribute names,
            // you will need to change related CSS files
            viewport: '.slider-viewport',
            track: '.slider-track',
            slide: '.slide',
            // Arrows
            prevArrow: '.slider-prev',
            nextArrow: '.slider-next',
            // Slider state
            atLastSlide: '.slider-end',
            atFirstSlide: '.slider-start',
            noSlide: '.no-slide',
            // Slide image classes
            imageContainerClass: '.slide-image',
            imageAsBackgroundClass: '.slide-image-background',
            imageAsBackgroundWrapperClass: '.slide-image-background-wrapper',
            // Slide background classes / data attributes
            backgroundClass: '.slide-data-background',
            backgroundZoomClass: '.slide-data-zoom-background',
            backgroundDataAttr: 'background',
            backgroundZoomDataAttr: 'zoom-background',

            // Check if we should enable single slide mode..
            // Return true to scroll only one slide or false to slide the default distance.
            // You can also set this to a boolean instead of a function.
            // By default, if any slide is wider than 30% of the viewport, single slide mode is enabled.
            isInSingleSlideMode: function ($slider) {
                var isInSingleSlideMode = false,
                    viewportWidth = $slider.find(this.viewport).width();

                $slider.find(this.slide).each(function () {
                    isInSingleSlideMode = $(this).outerWidth() / viewportWidth > .3;
                    return ! isInSingleSlideMode;
                });

                return isInSingleSlideMode;
            },

            // Slide distance used if "isInSingleSlideMode" is true.
            // Return any value supported by the jquery.scrollTo plugin:
            // https://github.com/flesler/jquery.scrollTo
            // By default this will slide 70% of the viewport.
            defaultSlideDistance: function ($slider, $viewport, $track, isNext) {
                return (isNext ? '+=' : '-=') + ($viewport.width() * .7) + 'px';
            },

            // Before callbacks...
            // Return false to cancel slide.
            onBeforeSlideNext: function ($slider) { },
            onBeforeSlidePrev: function ($slider) { },

            // After callbacks...
            onAfterSlideNext: function ($slider) { },
            onAfterSlidePrev: function ($slider) { }
        };

    function Plugin(element, options) {
        // Merge options...
        this.options = $.extend( {}, defaults, options);

        // Cache elements...
        this.$slider = $(element);
        this.$viewport = this.$slider.find(this.options.viewport);
        this.$track = this.$slider.find(this.options.track);
        this.$slides = this.$slider.find(this.options.slide);

        // Calculated values...
        this.viewportWidth = 0;
        this.slidesTotalWidth = 0;
        this.singleSlideIsWiderThanViewport = false;
        this.slidesFitInViewport = false;
        this.isInSingleSlideMode = false;
        this.noSlideClass = (this.options.noSlide).substr(1);
        this.onResize = null;
        this.isSliding = false;

        // Kickoff...
        this.init();
    }

    Plugin.prototype = {

        init: function ()  {
            this.swapSlideCoverImages();
            this.insertDataBackgrounds();
            this.registerEvents();
            this.evaluateSlider();

            // Do a recheck after 1 second
            // in case images load slowly...
            setTimeout(function () {
                this.evaluateSlider();
            }.bind(this), 1000);
        },

        swapSlideCoverImages: function () {
            this.$slider.find('img' + this.options.imageAsBackgroundClass).each(function (index, image) {
                var $image = $(image),
                    $container = $image.closest(this.options.imageContainerClass),
                    imageUrl = $image.prop('src');

                if (imageUrl) {
                    $container
                        .css('backgroundImage', 'url(' + imageUrl + ')')
                        .addClass((this.options.imageAsBackgroundWrapperClass).substr(1));
                }
            }.bind(this));
        },

        insertDataBackgrounds: function () {
            this.$slider.find(this.options.slide).each(function (index, slide) {
                var $slide = $(slide),
                    $background,
                    backgroundUrl = $slide.data(this.options.backgroundDataAttr) || $slide.data(this.options.backgroundZoomDataAttr),
                    shouldZoom = !! $slide.data(this.options.backgroundZoomDataAttr);

                if (backgroundUrl) {
                    $background = $('<div/>')
                        .addClass((this.options.backgroundClass).substr(1))
                        .css('backgroundImage', 'url(' + backgroundUrl + ')');

                    if (shouldZoom) {
                        $background.addClass((this.options.backgroundZoomClass).substr(1));
                    }

                    $slide.prepend($background);
                }
            }.bind(this));
        },

        registerEvents: function () {
            // Next arrow click...
            this.$slider.on('click', this.options.nextArrow, function (e) {
                e.preventDefault();
                this.slideTo(this.$slides, true);
            }.bind(this));

            // Prev arrow click...
            this.$slider.on('click', this.options.prevArrow, function (e) {
                e.preventDefault();
                this.slideTo($(this.$slides.get().reverse()), false);
            }.bind(this));

            if (this.options.enableSwipe) {
                // Swipe left...
                this.$slider.on('swiperight', function () {
                    this.slideTo($(this.$slides.get().reverse()), false);
                }.bind(this));

                // Swipe right...
                this.$slider.on('swipeleft', function () {
                    this.slideTo(this.$slides, true);
                }.bind(this));

                // No dragging when "swiping" with the mouse...
                this.$slider.on('dragstart', 'a, img', function (e) {
                    e.preventDefault();
                });

                // Don't follow links when swiping (IE 11 & Edge)...
                this.$slider.on('click', 'a', function (e) {
                    if (this.isSliding) {
                        e.preventDefault();
                    }
                }.bind(this));
            }

            // Window resize event...
            $(window).on('resize', function () {
                clearTimeout(this.onResize);
                this.onResize = setTimeout(function () {
                    this.evaluateSlider();
                    this.onResize = null;
                }.bind(this), 900);
            }.bind(this));
        },

        // Triggered on init
        // and on window resize.
        evaluateSlider: function () {
            this.updateSliderInfo();
            this.updateSlider();
            this.updateArrows();
        },

        updateSliderInfo: function () {
            this.viewportWidth = this.getViewportWidth();
            this.slidesTotalWidth = this.getSlidesWidth();
            this.singleSlideIsWiderThanViewport = this.isSingleSlideWiderThanViewport();
            this.slidesFitInViewport = this.checkSlidesFitInViewport();
            this.isInSingleSlideMode = this.options.isInSingleSlideMode instanceof Function
                ? this.options.isInSingleSlideMode(this.$slider)
                : this.options.isInSingleSlideMode;
        },

        updateSlider: function () {
            if (this.slidesFitInViewport || this.singleSlideIsWiderThanViewport) {
                this.$slider.addClass(this.noSlideClass);
            } else {
                this.$slider.removeClass(this.noSlideClass);
            }

            if (this.singleSlideIsWiderThanViewport) {
                this.slideTo(this.$slides, true);
            }
        },

        updateArrows: function () {
            var atLastSlide = (this.options.atLastSlide).substr(1),
                atFirstSlide = (this.options.atFirstSlide).substr(1);

            if (this.isAtLastSlide()) {
                this.$slider.addClass(atLastSlide);
            } else {
                this.$slider.removeClass(atLastSlide);
            }

            if (this.isAFirstSlide()) {
                this.$slider.addClass(atFirstSlide);
            } else {
                this.$slider.removeClass(atFirstSlide);
            }
        },

        slideTo: function ($slides, isNext) {
            if (this.isSliding || this.runBeforeCallback(isNext) === false) {
                return false;
            }

            this.isSliding = true;

            this.$viewport.scrollTo(this.getSlideToPosition($slides, isNext), this.options.slideSpeed, {
                onAfter: function () {
                    this.updateArrows();
                    this.runAfterCallback(isNext);
                    this.isSliding = false;
                }.bind(this)
            });
        },

        getSlideToPosition: function ($slides, isNext) {
            if ( ! this.isInSingleSlideMode) {
                return this.options.defaultSlideDistance(this.$slider, this.$viewport, this.$track, isNext);
            }

            var trackOffset = this.getTrackOffset(),
                halfViewportWidth = this.viewportWidth / 2,
                slideToOffset = 0,
                isPrev = ! isNext;

            $slides.each(function (index, slide) {
                var $slide = $(slide),
                    slideWidth = $slide.outerWidth(),
                    leftOffset = $slide.position().left + parseInt($slide.css("marginLeft")),
                    slideCenterPosition = leftOffset + (slideWidth / 2) - trackOffset,
                    slideCenterIsOverHalfWay = slideCenterPosition - 2 > halfViewportWidth,
                    slideCenterIsBeforeHalfWay = slideCenterPosition + 2 < halfViewportWidth;

                slideToOffset = leftOffset + ((slideWidth - this.viewportWidth) / 2); //=> Center slide

                if ( (isNext && slideCenterIsOverHalfWay) ||
                     (isPrev && slideCenterIsBeforeHalfWay) ) {
                    return false;
                }
            }.bind(this));

            return slideToOffset;
        },

        getTrackOffset: function () {
            return Math.abs(this.$track.position().left);
        },

        getViewportWidth: function () {
            return parseFloat(this.$viewport.width());
        },

        getSlidesWidth: function () {
            var width = 0;

            this.$slides.each(function () {
                width += parseFloat($(this).outerWidth(true));
            });

            return width;
        },

        checkSlidesFitInViewport: function () {
            return this.viewportWidth > this.slidesTotalWidth;
        },

        isSingleSlideWiderThanViewport: function () {
            return this.$slides.length <= 1 && this.slidesTotalWidth >= this.viewportWidth;
        },

        isAFirstSlide: function () {
            return this.getTrackOffset() - 1 <= this.getSlideOverflow(this.$slides.first());
        },

        isAtLastSlide: function () {
            var trackRemaining = this.slidesTotalWidth - this.getTrackOffset() - 1,
                slideOverflow = this.getSlideOverflow(this.$slides.last());

            return this.viewportWidth >= trackRemaining - slideOverflow;
        },

        getSlideOverflow: function ($slide) {
            if ($slide.outerWidth() <= this.viewportWidth) {
                return 0;
            }

            return ($slide.outerWidth() - this.viewportWidth) / 2;
        },

        runBeforeCallback: function (isNext) {
            var beforeCallback = isNext
                    ? this.options.onBeforeSlideNext
                    : this.options.onBeforeSlidePrev;

            if (beforeCallback instanceof Function) {
                return beforeCallback(this.$slider);
            }

            return true;
        },

        runAfterCallback: function (isNext) {
            var afterCallback = isNext
                    ? this.options.onAfterSlideNext
                    : this.options.onAfterSlidePrev;

            if (afterCallback instanceof Function) {
                afterCallback(this.$slider);
            }
        }
    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if ( ! $.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin(this, options));
            }
        });
    };

})(jQuery, window, document);

$('.slider').slide();

              
            
!
999px

Console