JSFiddle - React, Tailwind, and code Playground

by vengiss

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="container">

    <div class="slider">
        <img src="http://placehold.it/300x300" class="placeholder">
        <img src="http://placekitten.com/300/300">
        <img src="http://placekitten.com/300/299">
        <img src="http://placekitten.com/300/298">        
    </div>

    <div class="content">
        Random content, resize this window to see how it works          
    </div>

</div>

CSS

img {
    /* Boilerplate responsive images CSS */
    width: auto;
    max-width: 100%;
    height: auto;    
}

.slider {
    width: 50%;
    margin: 50px auto 20px; 
}

.placeholder {
    /* Making it invisible lets the parent container adjust its size */
    visibility : hidden;
}

JavaScript

$(function() {
    $(".slider").cycle({
        // Just being fancy, you can add an extra class to
        // the rest of the slides and use it here.
        slideExpr: "img:not(.placeholder)",
        // Don't let the plugin handle the sizes
        slideResize: false,
        containerResize: false
    });
});