Script: http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm. I tweaked it in order to make it work on mobile devices. (I know DynamicDrive has its own mobile version, but that script has lost certain features I wanted to keep). The changes have not been made in the external js-file itself, but in the page containing it.
Note:
The script references 5 navigation images. They can be downloaded at http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm.
CSS (in the page containing the external js-file):
<style>
/* Tweaking the DD slideshow script found at http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm */
#simplegallery1 {border: 10px solid darkred; width: 100%; text-align: center; margin: auto}
#simplegallery1 .gallerylayer img{ /* make all images scale to a percentage of slideshow width and/or height */
height: 100%;
max-width: 100%;
max-height: 100%;
/*height: auto;*/
}
.gallerylayer {
border: 0;
background: black!important;
height: 100%; display: inline-block; width: 100%;
}
</style>
JS (in the page containing the external js-file; the images in imagearray are just exemples):
<script type="text/javascript" src="simplegallery.js">
/*
Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
Please keep this notice intact
Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
*/
</script>
<script type="text/javascript">
/* Tweaking the DD slideshow script found at http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm */
var dimensions_width=window.innerWidth/3.7; //you may change the value for the denominator; the bigger the value, the smaller the image
var dimensions_height=dimensions_width/1.35; //increase or decrease the value for the denominator for better results; the bigger the value, the smaller the image (vertically); don't make it too small, as this may result in image distorsion; the value for the denominator must be small enough to prevent the black background from showing as much as possible
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [dimensions_width, dimensions_height], //width/height of gallery
imagearray: [
["https://d1ooya5aw7ml3h.cloudfront.net/monthly_2015_03/5580296bd108d_53100_990x742-cb13946609701.jpg.713801a18e8a441ade891beadce4b979.jpg", "", "", "Clouds"],
["http://www.seaisland.com/images/video/sea-island-intro.jpg", "", "", "Sea"],
["http://www.scienceagogo.com/news/img/caveman2is.jpg", "", "", "Homo sapiens"],
["https://pmcvariety.files.wordpress.com/2013/05/the-flintstones-and-rubbles-the-flintstones-5767345-470-282.jpg?w=470&h=282&crop=1", "", "", "Flintstones"]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500 //transition duration (milliseconds)
})
</script>