bootstrap slider

by secretgspot

HTML

<h1>sliders</h1>


<h2>Slider 1</h2>
<div class="wk-gallery-slider" id="gallery-slider-508-4f1f1bcd3d89c" data-widgetkit="gallery-slider" data-options="{&quot;style&quot;:&quot;slider&quot;,&quot;width&quot;:300,&quot;height&quot;:200,&quot;total_width&quot;:600,&quot;spacing&quot;:3,&quot;center&quot;:1,&quot;sticky&quot;:0,&quot;duration&quot;:400,&quot;lightbox&quot;:1,&quot;lightbox_caption&quot;:1,&quot;spotlight&quot;:1,&quot;spotlight_effect&quot;:&quot;bottom&quot;}" style="width: 600px; height: 200px; ">
    <ul class="slides" style="width: 1176px; ">
        <li style="background-image: url(//placehold.it/200x150); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; margin-right: 3px; width: 147px; overflow-x: hidden; overflow-y: hidden; background-position: 50% 0px; background-repeat: no-repeat no-repeat; " class=""><a class="spotlight" style="width: 300px; position: relative; overflow-x: hidden; overflow-y: hidden; " href="//placehold.it/200x150" data-lightbox="group:508-4f1f1bcd3d89c" title="This is a caption for the first image." data-spotlight="effect:bottom"><div style="height: 200px; width: 300px;"></div><div class="overlay" style="position: absolute; display: block; visibility: visible; width: 300px; height: auto; left: 0px; bottom: -40px; "><div>This is a caption for the first image.</div></div></a></li>

        <li style="background-image: url(//placehold.it/200x150); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; margin-right: 3px; width: 147px; overflow-x: hidden; overflow-y: hidden; background-position: 50% 0px; background-repeat: no-repeat no-repeat; " class=""><a class="spotlight" style="width: 300px; position: relative; overflow-x: hidden; overflow-y: hidden; " href="//placehold.it/200x150" data-lightbox="group:508-4f1f1bcd3d89c" title="This is a caption for the second image." data-spotlight="effect:bottom"><div...

CSS

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after { content: ""; display: table;
}
.clearfix:after, .grid-block:after { clear: both
}
.grid-box { float: left
}
.width20 { width: 20%
}
.width25 { width: 25%
}
.width33 { width: 33.333%
}
.width50 { width: 50%
}
.wk-content>*:first-child { margin-top: 0
}
.wk-content>*:last-child { margin-bottom: 0
}
.wk-slideshow, .wk-slideshow
.slides { position: relative
}
.wk-slideshow .slides, .wk-slideshow
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideshow .slides>li { position: absolute
}
.wk-slideshow .nav
li { cursor: pointer
}
.wk-slideshow .nav
span { display: block
}
.wk-slideshow .next, .wk-slideshow
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideshow
.caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px; background: rgba(0,0,0,0.5);
}
.wk-slideshow
.captions { display: none
}
.wk-slideshow .caption, .wk-slideshow .caption
a { color: #fff
}
.wk-slideshow .caption
a { text-decoration: underline
}
.wk-slideshow .wk-content > a:first-child, .wk-slideshow .wk-content > img:first-child, .wk-slideshow .wk-content>a:first-child>img { display: block
}
.wk-slideshow .slides > li > *, .wk-slideshow .slides>li>*>img { display: block
}
.wk-gallery
a { display: inline-block
}
.wk-gallery a>img:first-child { display: block
}
.wk-slideset
.sets { overflow: hidden
}
.wk-slideset .set, .wk-slideset
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideset
.set { display: none; position: relative; margin: 0 auto; text-align: center;
}
.wk-slideset .set:first-child { display: block
}
.wk-slideset .set>li { display: inline-block
}
.wk-slideset .nav
span { display: block; cursor: pointer;
}
.wk-slideset .next, .wk-slideset
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideset .wk-content > a:first-child, .wk-slideset .wk-content > img:first-child, .wk-slideset .wk-content>a:first-child>img { display:...

JavaScript

//SLIDER
(function(e) {
    var k = [],
        a = function() {},
        l = {
            width: 200,
            height: "auto",
            total_width: "auto",
            sticky: !1,
            spacing: 0,
            easing: "easeOutCirc",
            duration: 500
        };
    a.prototype = e.extend(a.prototype, {
        name: "galleryslider",
        initialize: function(a) {
            this.options = e.extend({}, l, a);
            var c = this,
                a = this.element.find(".slides:first"),
                b = a.children(),
                d = this.element,
                g = this.options.total_width == "auto" ? d.width() : this.options.total_width,
                i = this.options.width,
                j = g / b.length - this.options.spacing,
                h = (g - i) / (b.length - 1) - this.options.spacing;
            b.css({
                width: j,
                "margin-right": this.options.spacing
            });
            a.width(b.eq(0).width() * b.length * 2);
            d.css({
                width: g,
                height: this.options.height
            });
            b.each(function() {
                var a = e(this);
                a.bind("mouseover", function() {
                    b.stop().removeClass("active");
                    var d = [];
                    a.width();
                    var f = b.not(a).filter(function() {
                        return e(this).width() > h
                    });
                    f.each(function() {
                        d.push(e(this).width())
                    });
                    a.animate({
                        width: i
                    }, {
                        complete: function() {
                            f.css("width", h)
                        },
                        easing: c.options.easing,
                        duration: c.options.duration
                    }).addClass("active");
                    f.animate({
           ...