picture_slider
v1.0.3
Published
picture_slider formats a picture frame element > picture container element > image elements into a dynamic picture slider.
Downloads
5
Readme
picture_slider
by nickslick03
picture_slider formats a picture frame element > picture container element > image elements into a dynamic picture slider.
Usage
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.
Example
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.