See http://jquery.malsup.com/cycle and http://jquery.malsup.com/cycle/more.html?v2.23 for possible uses of the script
Script used here: http://malsup.github.com/jquery.cycle.all.js.
The outer container for the sides has style="position: relative; padding-bottom: 45%; border: 10px solid darkred" here, where the padding is used for giving the slideshow its height.
The inner container for the slides has style="position: absolute; width: 100%; height: 100%; background: black; overflow: hidden"
Each slide is created via
The navigation buttons show onmouseover and hide onmouseout, see source. As this does not work on mobile devices, we must have <body ontouchend = "document.getElementById('controls').style.display='none'">.
View source for more details.
Script used here: http://malsup.github.com/jquery.cycle.all.js.
The outer container for the sides has style="position: relative; padding-bottom: 45%; border: 10px solid darkred" here, where the padding is used for giving the slideshow its height.
The inner container for the slides has style="position: absolute; width: 100%; height: 100%; background: black; overflow: hidden"
Each slide is created via
<div style="position: absolute; width: 100%; height: 100%; text-align: center">
<div style="position: absolute; left:0px; right:0px; text-align: center; ">
<button style="background: white; font-family: verdana; font-size: 11px; padding: 5px; border:0; border-radius: 5px; background: darkred; color: white">Your text for the slide</button>
</div>
<img src="some_image.jpg" alt="" style="height: 100%; display: inline-block" >
</div>
<div style="position: absolute; left:0px; right:0px; text-align: center; ">
<button style="background: white; font-family: verdana; font-size: 11px; padding: 5px; border:0; border-radius: 5px; background: darkred; color: white">Your text for the slide</button>
</div>
<img src="some_image.jpg" alt="" style="height: 100%; display: inline-block" >
</div>
The navigation buttons show onmouseover and hide onmouseout, see source. As this does not work on mobile devices, we must have <body ontouchend = "document.getElementById('controls').style.display='none'">.
View source for more details.
Text beneath slideshow