by nickslick03
picture_slider formats a picture frame element > picture container element > image elements into a dynamic picture slider.
JS:
let switchSlide = formatPictureSlider(pictureFrame, pictureContainer, height, heightUnit, autoSlideSeconds, maxHeight);
pictureFrame : HTML element - contains pictureContainer and images elements.
pictureContainer : HTML element - whose parent is pictureFrame; parent of image elements.
height : number - Represents the height of pictureFrame.
heightUnit : String - Represents the units height parameter is in; currently 'px'
and 'vw'
are supported.
autoSlideSeconds : number - (Optional) automatically slides pictureSlider to the right every autoSlideSeconds
second.
maxHeight : number - (Optional) sets a maximum height limit on pictureFrame element in pixels.
return value : function - returns a function which takes a parameter of an index, and slides the images slider to the image corresponding to that index.
HTML:
<div id="pictureFrame">
<div id="pictureContainer">
<img src="./images/download.jpeg" alt=""><img src="./images/download (1).jpeg" alt=""><img src="./images/download (2).jpeg" alt=""><img src="./images/download (3).jpeg" alt="">
</div>
</div>
JS:
document.body.onload = () => { formatPictureSlider(document.getElementById('pictureFrame'), document.getElementById('pictureContainer'), 40, 'vw', 3, 400); };
OUTPUT:
IMPORTANT:
insure that formatPictureSlider
is run after the document loads like in the example above using the onload
event. formatPictureSlider
will not work if it is ran before the images load into the document.