JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Carki">
<meta name="editor" content="html-editor phase 5">
</head>
<body>
<div class="nav"><a id="prev1" href="#">Prev</a> <a id="next1" href="#">Next</a></div>    
<div  class="slideshow">
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg" alt="1" name="wechselbild" style="width:500px; height:400px; position:absolute; left:250px; " >
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/002.jpg" alt="2" name="wechselbild" style="width:500px; height:400px; position:absolute; left:250px; " >
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/003.jpg" alt="3" name="wechselbild" style="width:500px; height:400px; position:absolute; left:250px; " >
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/004.jpg" alt="4" name="wechselbild" style="width:500px; height:400px; position:absolute; left:250px; " >
</div>
</body>
</html>

CSS

.slideshow{
    background-color:#3d3d3d; 
    position:relative;
    width:500px; 
    height:400px;
    left: 100px;
    top: 50px;
}

JavaScript

$(document).ready(function() {
    
    $('.slideshow').cycle({
        fx: 'shuffle' ,
        pause:  1,
        prev: '#prev1', 
        next: '#next1',
        nowrap:  1, 
        timeout: 0,       
        speed: 1000
    });
    
    $(window).keydown(function(e){
        var key = e.charCode || e.keyCode || 0; 
        
        if(key == 37) { $('#prev1').trigger('click'); return false; }
        if(key == 39) { $('#next1').trigger('click'); return false; }
    });
});