JSFiddle - React, Tailwind, and code Playground
HTML
<div id="fader">
<img src="http://artsoft.de/images/image1.jpg" style="display:block" />
<img src="http://artsoft.de/images/image2.jpg" style="display:none" />
<img src="http://artsoft.de/images/image3.jpg" style="display:none" />
<img src="http://artsoft.de/images/image4.jpg" style="display:none" />
</div>
JavaScript
/* =========================================================
// jquery.innerfade.js
// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail: [email protected]
// Web: http://medienfreunde.com
// based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
// and Ralf S. Engelschall http://trainofthoughts.org/
*
* <ul id="news">
* <li>content 1</li>
* <li>content 2</li>
* <li>content 3</li>
* </ul>
*
* $('#news').innerfade({
* animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
* speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'),
* timeout: Time between the fades in milliseconds (Default: '2000'),
* type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
* containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
* runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
* children: optional children selector (Default: null)
* });
*
// ========================================================= */
(function ($) {
$.fn.innerfade = function (options) {
return this.each(function () {
$.innerfade(this, options);
});
};
$.innerfade = function (container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options) $.extend(settings, options);
if (settings.children === null) var elements = $(container).children();
else var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position',...