JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sliderXYZ">
<div class="slides">
<div class="slide"...
JavaScript
setTimeout(function() {
// particle slider is already loaded
// and all code is at the top of he file
// :-D
// create and init
ps = new ParticleSlider({
// ptlGap: 1,
// ptlSize: 1,
sliderId: "sliderXYZ",
width: 1400,
height: 600,
});
ps.init(false);
}, 1000);
// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ ParticleSlider | Version 0.9 │ \\
;
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright © 2013 Tamino Martinius (http://zaku.eu) │ \\
// │ Copyright © 2013 Particleslider.com (http://particleslider.com) │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Terms of usage: (http://particleslider.com/legal/license) │ \\
// └────────────────────────────────────────────────────────────────────┘ \\
;
function ParticleSlider(a) {
var b = this;
b.sliderId = "particle-slider",
b.color = "#fff",
b.hoverColor = "#88f",
b.width = 0,
b.height = 0,
b.ptlGap = 0,
b.ptlSize = 1,
b.slideDelay = 10,
b.arrowPadding = 10,
b.showArrowControls = !0,
b.onNextSlide = null,
b.onWidthChange = null,
b.onHeightChange = null,
b.onSizeChange = null,
b.monochrome = !1,
b.mouseForce = 1e4,
b.restless = !0,
b.imgs = [];
if (a) {
var c = ["color",
"hoverColor",
"width",
"height",
"ptlGap",
"ptlSize",
"slideDelay",
"arrowPadding",
"sliderId",
"showArrowControls",
"onNextSlide",
"monochrome",
"mouseForce",
"restless",
"imgs",
"onSizeChange",
"onWidthChange",
"onHeightChange"];
for (var d = 0,
e = c.length; d < e; d++) a[c[d]] && (b[c[d]] = a[c[d]])
}
b.$container = b.$("#" + b.sliderId),
b.$$children = b.$container.childNodes,
b.$controlsContainer = b.$(".controls"),
b.$$slides = b.$(".slide",
b.$(".slides").childNodes,
!0),
b.$controlLeft = null,
...