JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="http://projets.alteo.fr/stivo-v2/www/public/js/jquery/jquery-1.7.1.min.js"></script>
<script src="http://projets.alteo.fr/stivo-v2/www/public/js/jquery/plugins/jquery.carouFredSel-6.2.0-packed.js"></script>
<h2>Bug in Firefox 19 when "circular:true"</h2> 
<p>2 slides :</p>
<ul>
    <li>First slide with a .swf</li>
    <li>Second slide with an image</li>
</ul>
<p>Everytime a new "cycle" is reached, the .swf disappears</p>
<button class="slide1-prev">Prev</button>
<button class="slide1-next">Next</button>
<div class="slideshow">
    <div class="slides slides-1">
        <div>
            <object width="300" height="300" data="http://dl.dropbox.com/u/5855663/test.swf" type="application/x-shockwave-flash">
                <param name="movie" value="http://dl.dropbox.com/u/5855663/test.swf"/>
                
            </object>
        </div>
       
        <div>
            <img src="http://placehold.it/300x300">
       </div>
    </div>
</div>
<p>Everything works fine on other browsers</p>
<h2>It's working when "circular:false"</h2>
    <button class="slide-prev">Prev</button>
    <button class="slide-next">Next</button>

    <div class="slideshow">
    <div class="slides slides-2">
        <div>
            <object width="300" height="300" data="http://dl.dropbox.com/u/5855663/test.swf" type="application/x-shockwave-flash" id="movie_name" align="middle">
                <param name="movie" value="http://dl.dropbox.com/u/5855663/test.swf"/>
                
            </object>
        </div>
        <div>
            <img src="http://placehold.it/300x300">
       </div>
    </div>
</div>

CSS

body {padding:20px; font-family:Arial;}
.slideshow {padding:15px; width:300px; background:gray; margin:0 0 30px;}
.slides > div {position: relative; float:left;}

JavaScript

$(".slides-1").carouFredSel({
	items 		: 1,
	auto : false,
    height:300,
	prev: {
		button:".slide1-prev",
		key: "left"
	},
	next: {
		button:".slide1-next",
		key: "right"
	}
});
$(".slides-2").carouFredSel({
	items 		: 1,
	auto : false,
    height:300,
    circular:false,
	prev: {
		button:".slide-prev",
		key: "left"
	},
	next: {
		button:".slide-next",
		key: "right"
	}
});