JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://bagger.ucoz.kz/js/craftyslide.min.js"></script>
<div id="slideshow">
    <ul>
        <li>
            <img title="Flower and Bee" src="http://desizntech.info/demo/Craftyslide_demo/images/image_1.jpg" alt="Flower and Bee" />
        </li>
        <li>
            <img title="Flower" src="http://desizntech.info/demo/Craftyslide_demo/images/image_2.jpg" alt="Flower" />
        </li>
        <li>
            <img title="Leaf" src="http://desizntech.info/demo/Craftyslide_demo/images/image_3.jpg" alt="Leaf" />
        </li>
    </ul>
</div>

CSS

/*

Craftyslide CSS Styles

*/
#slideshow {
    margin:0 auto;
}
#slideshow {
    margin:10px;
    padding:0;
    position:relative;
    border:15px solid #f8f8f8;
    -webkit-box-shadow:0 3px 5px #999;
    -moz-box-shadow:0 3px 5px #999;
    box-shadow:0 3px 5px #999;
}
#slideshow ul {
    position:relative;
    overflow:hidden;
    margin:0;
    padding:0;
}
#slideshow ul li {
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    list-style:none;
}
#pagination {
    clear:both;
    width:75px;
    margin:25px auto 0;
    padding:0;
}
#pagination li {
    list-style:none;
    float:left;
    margin:0 2px;
}
#pagination li a {
    display:block;
    width:10px;
    height:10px;
    text-indent:-10000px;
    background:url(http://desizntech.info/demo/Craftyslide_demo/images/pagination.png);
}
#pagination li a.active {
    background-position:0 10px;
}
.caption {
    width:100%;
    margin:0;
    padding:10px;
    position:absolute;
    left:0;
    font-family:Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight:lighter;
    color:#fff;
    border-top:1px solid #000;
    background:rgba(0, 0, 0, 0.6);
}

JavaScript

$("#slideshow").craftyslide({
    'width': 640,
        'height': 300,
        'pagination': true,
        'fadetime': 500,
        'delay': 500
});