JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<div id="test">
    <div class="slide">
        <img src="http://farm4.staticflickr.com/3125/2629096658_8c57d707b3_z.jpg"/>
    </div>
    <div class="slide" data-delay="2">
        <img src="http://farm7.staticflickr.com/6143/5951493219_f65139d65a_z.jpg"/>
    </div>
    <div class="slide" data-delay="5">
        <img src="http://farm1.staticflickr.com/89/253367473_74a5c4dae2_z.jpg"/>
    </div>
    <div class="slide">
        <img src="http://farm3.staticflickr.com/2245/1533172578_6de7544508_z.jpg?zz=1"/>
    </div>
    <div class="slide">
        <img src="http://farm4.staticflickr.com/3095/3502308202_80420dda73_z.jpg"/>
    </div>
    <div class="toggle">&gt;</div>
    <div class="nav">
        <a href="#" class="prev">&larr;</a>
        <a href="#" class="next">&rarr;</a>
    </div>
    <div class="buttons">
        <!-- the index buttons will be created by the plugin -->
    </div>
</div>

<h3>jQuery Slideshow plugin</h3>
<p>My take on the typical left/right image slider.</p>
<p>&raquo; <a href="https://gist.github.com/mindplay-dk/6922957">source code here.</a></p>
<ul>
    <li>Left/right buttons (optional)</li>
    <li>Direct links / position indicator (optional)</li>
    <li>Minimal CSS dependency.</li>
    <li>No dependencies on any particular document structure, class-names or element-types.</li>
    <li>Highly configurable and less than 2KB <a href="http://jscompress.com/">minified</a>.</li>
</ul>

CSS

/* main container: */

#test {
    clear: both;
    width: 100%;
    min-width: 240px;
    max-width: 790px;
    height: 320px;
    overflow: hidden;
    font-family: Verdana, Arial;
    position: relative;
}

#test .slide {
    display: none;
    overflow: hidden;
    height: inherit;
    width: 100%;
    position: absolute;
    left: 0%;
}

#test .slide img {
    width: 640px;
    position: absolute;
    left: 50%;
    margin-left: -320px;
}

@media (max-width:320px) {
    #test { height: 150px; }
    #test .slide img {
        width: 320px;
        margin-left: -160px;
    }
}

@media (min-width:640px) {
    #test { height: 450px; }
    #test .slide img {
        width: 800px;
        margin-left: -400px;
    }
}

/* toggle button: */

#test .toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 28px;
    background: black;
    opacity: 0.5;
    cursor: pointer;
    border-radius: 5px;
}

/* index buttons (1, 2, 3...) */

#test .buttons {
    position: absolute;
    height: 32px;
    bottom: 0px;
    left: 55px;
}

#test .buttons a {
    display: block;
    width: 24px;
    height: 22px;
    text-align: center;
    line-height: 20px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    background: black;
    margin-left: 2px;
    border-radius: 5px;
    opacity: 0.5;
    float: left;
}

#test .buttons a:hover {
    opacity: 1.0;
    color: yellow;
}

#test .buttons a.active {
    background: white;
    color: black;
    opacity: 1.0;
}

/* left/right arrow buttons: */

#test .nav {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0px;
}

#test .nav a {
    font-size: 36px;
    text-decoration: none;
    color: white;
    display: block;
    width: 50px;
    text-align: center;
    height: 50px;
    position: absolute;
    overflow: hidden;
}

#test .nav...

JavaScript

/**
 * jQuery Slideshow plugin
 * (responsive version with CSS3 optimized animation)
 *
 * author:  Rasmus Schultz <[email protected]>
 * license: LGPL <http://www.gnu.org/licenses/lgpl-3.0.txt>
 *
 * This plugin creates a panning slideshow, optionally with left/right controls
 * and direct access to the individual slides via (numbered) index-buttons.
 *
 * No CSS is required, and there is no dependencies on any particular class-names,
 * element-types or element hierarchy - you can use whatever you want for slides,
 * containers, buttons, etc.
 *
 *
 * USAGE
 * =====
 *
 * Width and height options are not required - by default, the plugin picks up
 * the inner width/height of the slideshow container, so you can define that
 * using CSS, if you like.
 *
 * The slides must reside in a container, but it doesn't have to be the element
 * you applied the slideshow to - for example, if that element is a wrapper with
 * a background, you can use the "container" option to specify the actual container.
 *
 * You can specify the delay for individual slides, by adding a data-delay attribute
 * to the individual slide elements, specifying the time in seconds (decimals allowed.)
 *
 * If a container for index-buttons is specified (using the "buttons" option),
 * the plugin will generate an index-button for each slide; you can override the
 * default button-creation method using the "createButton" callback-option.
 *
 * The plugin does not generate the next/previous buttons - you can use the "next"
 * and "prev" options to apply event-handlers to your existing buttons/elements.
 *
 * Basic options: (all optional, except for "slides")
 *
 *   slides           selector or set of individual slides (required)
 *   container        overrides the slide container element (defaults to this)
 *   width            width in pixels (defaults to container's inner width)
 *   height           height in pixels (defaults to container's inner height)
 *
 * Animation options: (all optional)
...