JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://www.skitter-slider.net/js/jquery.easing.1.3.js"></script>
<script src="http://www.skitter-slider.net/js/jquery.animate-colors-min.js"></script>
<script src="http://www.skitter-slider.net/js/jquery.skitter.min.js"></script>
<section class="border-skitter content-width">
    <div class="box_skitter box_skitter_large">
        <ul>
            <li><a href="#cut"><img src="http://www.skitter-slider.net/images/001.jpg" class="cut" /></a>
                <div class="label_text">
                    <p>cut</p>
                </div>
            </li>
            <li><a href="#swapBlocks"><img src="http://www.skitter-slider.net/images/002.jpg" class="swapBlocks" /></a>
                <div class="label_text">
                    <p>swapBlocks</p>
                </div>
            </li>
            <li><a href="#swapBarsBack"><img src="http://www.skitter-slider.net/images/003.jpg" class="swapBarsBack" /></a>
                <div class="label_text">
                    <p>swapBarsBack</p>
                </div>
            </li>
            <li><a href="#swapBars"><img src="http://www.skitter-slider.net/images/004.jpg" class="swapBars" /></a>
                <div class="label_text">
                    <p>swapBars</p>
                </div>
            </li>
            <li><a href="#hideBars"><img src="http://www.skitter-slider.net/images/005.jpg" class="hideBars" /></a>
                <div class="label_text">
                    <p>hideBars</p>
                </div>
            </li>
            <li><a href="#downBars"><img src="http://www.skitter-slider.net/images/006.jpg" class="downBars" /></a>
                <div class="label_text">
                    <p>downBars</p>
                </div>
            </li>
            <li><a href="#upBars"><img src="http://www.skitter-slider.net/images/007.jpg" class="upBars" /></a>
                <div class="label_text">
                    <p>upBars</p>
                </div>
            </li>
           ...

CSS

/* =Skitter styles
----------------------------------------------- */
 .box_skitter {
    position: relative;
    width: 800px;
    height: 300px;
    background: #000;
}
.box_skitter img {
    max-width: none;
}
/* Tip for stildv */
 .box_skitter ul {
    display: none;
}
.box_skitter .container_skitter {
    overflow: hidden;
    position: relative;
}
.box_skitter .image {
    overflow: hidden;
}
.box_skitter .image img {
    display: none;
}
/* =Box clone
-------------------------------------------------------------- */
 .box_skitter .box_clone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    overflow: hidden;
    display: none;
    z-index: 20;
}
.box_skitter .box_clone img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
}
/* =Navigation
-------------------------------------------------------------- */
 .box_skitter .prev_button {
    position: absolute;
    top: 50%;
    left: 35px;
    z-index: 152;
    width: 42px;
    height: 42px;
    overflow: hidden;
    text-indent: -9999em;
    margin-top: -25px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.box_skitter .next_button {
    position: absolute;
    top: 50%;
    right: 35px;
    z-index: 152;
    width: 42px;
    height: 42px;
    overflow: hidden;
    text-indent: -9999em;
    margin-top: -25px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.box_skitter .prev_button:hover, .box_skitter .next_button:hover {
    opacity: 0.5 !important;
}
/* =Numbers
-------------------------------------------------------------- */
 .box_skitter .info_slide {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;
    background: #000;
    color: #fff;
    font: bold 11px arial;
    padding: 5px 0 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    opacity: 0.75;
}
.box_skitter .info_slide .image_number {
    background:...

JavaScript

$(document).ready(function () {
    $('.box_skitter_large').skitter({
        theme: "square",
        numbers_align: "center",
        dots: true,
        preview: true,
        focus: true,
        focus_position: "leftTop",
        controls: true,
        controls_position: "leftTop",
        progressbar: true,
        enable_navigation_keys: true,
        onLoad: function (self) {
            if (this.thumbs) $('.border-skitter').height(350);
            box_skitter_large = self;
        }
    });
});