JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://demo.dev7studios.com/nivo-slider/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css">
<script src="http://demo.dev7studios.com/nivo-slider/wp-content/plugins/nivo-slider/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="http://demo.dev7studios.com/nivo-slider/wp-content/plugins/nivo-slider/scripts/nivo-slider/themes/default/default.css">
<div id="slider1" class="theme-default">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/DenglerSW-Peach-faced-Lovebird-20051026-1280x960.jpg/320px-DenglerSW-Peach-faced-Lovebird-20051026-1280x960.jpg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Cascade_carieul_1280x960.jpg/320px-Cascade_carieul_1280x960.jpg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/CrayonLogs.jpg/320px-CrayonLogs.jpg" alt="">
</div>
<div id="slider2" class="theme-default">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Cegonha_alsaciana.jpg/320px-Cegonha_alsaciana.jpg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Tagetes_yellow_orange.jpg/320px-Tagetes_yellow_orange.jpg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/TRS-80_Color_Computer_1.jpg/320px-TRS-80_Color_Computer_1.jpg" alt="">
</div>
<div id="slider3" class="theme-default">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Cegonha_alsaciana.jpg/320px-Cegonha_alsaciana.jpg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Tagetes_yellow_orange.jpg/320px-Tagetes_yellow_orange.jpg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/TRS-80_Color_Computer_1.jpg/320px-TRS-80_Color_Computer_1.jpg" alt="">
</div>
CSS
#slider1 {
width: 320px;
height: 200px;
float: left;
}
#slider2 {
width: 320px;
height: 200px;
float: right;
}
JavaScript
$('#slider1')
.nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
directionNav: false,
controlNav: false, // 1,2,3... navigation
keyboardNav: false, // Use left & right arrows
pauseOnHover: false, // Stop animation while hovering
randomStart: false, // Start on a random slide
}).delay(1000)
.queue(function () {
$('#slider2').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
directionNav: false,
controlNav: false, // 1,2,3... navigation
keyboardNav: false, // Use left & right arrows
pauseOnHover: false, // Stop animation while hovering
randomStart: false, // Start on a random slide
}).delay(1000)
.queue(function () {
$('#slider2').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
directionNav: false,
controlNav: false, // 1,2,3... navigation
keyboardNav: false, // Use left & right arrows
pauseOnHover: false, // Stop animation while hovering
randomStart: false, // Start on a random slide
});
});
});