JSFiddle - React, Tailwind, and code Playground

by GlauberRocha

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="container">
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_614_vignette.jpg" alt="" />
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_612_vignette.jpg" alt="" />
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_610_vignette.jpg" alt="" />
</div>
<div class="container">
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_614_vignette.jpg" alt="" />
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_612_vignette.jpg" alt="" />
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_610_vignette.jpg" alt="" />
</div>
<!--
This DIV causes the script to break, apparently because the animation is prevented to launch (by lack of enough images, intended behaviour).
Firebug says :
TypeError: opts is undefined
if (paused && opts.paused)
jquery.cycle.all.js line 105
-->
<div class="container">
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_610_vignette.jpg" alt="" />
<!-- Uncomment this extra pic, and it works again -->
<!--    
    <img src="http://www.cinematheque.fr/data/classes/webtv/tvvideo_611_vignette.jpg" alt="" />
-->    
    
</div>

CSS

.container {
    overflow: hidden;
    width: 205px;
    height: 110px;
    margin: 24px;
}

JavaScript

$(".container")
    .cycle({timeout: 250, speed: 1000})
    .cycle("pause")
    .hover(function () {
        $(this).cycle("resume", true);
    }, function () {
        $(this).cycle("pause");
    });