bootstrap showcase

by secretgspot

HTML

<h1>showcase</h1>
<h2>Basic</h2>
<div id="gallery-527-4f1f1bcd3f6a1" class="wk-gallery-showcase" data-widgetkit="showcase" data-options="{&quot;style&quot;:&quot;showcase&quot;,&quot;width&quot;:600,&quot;height&quot;:&quot;auto&quot;,&quot;order&quot;:&quot;default&quot;,&quot;thumb_width&quot;:80,&quot;thumb_height&quot;:45,&quot;autoplay&quot;:0,&quot;interval&quot;:5000,&quot;duration&quot;:500,&quot;index&quot;:0,&quot;buttons&quot;:0,&quot;slices&quot;:15,&quot;animated&quot;:&quot;randomSimple&quot;,&quot;caption_animation_duration&quot;:500,&quot;effect&quot;:&quot;zoom&quot;,&quot;slideset_buttons&quot;:1,&quot;items_per_set&quot;:5,&quot;slideset_effect_duration&quot;:300}" style="width: 600px; ">

    <div id="slideshow-527-4f1f1bcd3f6a1" class="wk-slideshow" style="position: relative; width: 600px; visibility: visible; ">
        <div class="slides-container">
            <ul class="slides" style="width: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; height: 300px; ">
                <li style="top: 0px; left: 0px; position: absolute; width: 600px; height: 300px; display: list-item; "><img src="//placehold.it/200x150" width="600" height="300" alt="image01"></li>
                <li style="top: 0px; left: 0px; position: absolute; width: 600px; height: 300px; display: none; "><img src="//placehold.it/200x150" width="600" height="300" alt="image02"></li>
                <li style="top: 0px; left: 0px; position: absolute; width: 600px; height: 300px; display: none; "><img src="//placehold.it/200x150" width="600" height="300" alt="image03"></li>
                <li style="top: 0px; left: 0px; position: absolute; width: 600px; height: 300px; display: none; "><img src="//placehold.it/200x150" width="600" height="300" alt="image04"></li>
                <li style="top: 0px; left: 0px; position: absolute; width: 600px; height: 300px; display: none; "><img src="//placehold.it/200x150" width="600" height="300" alt="image05"></li>
             ...

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:...