Image Gallery
Description
<jp-image-gallery> is a component with the functionality of creating an image gallery with an interactive image carousel.
Attributes
| Name | Required | Type | Description |
|---|---|---|---|
| images | ✓ | Array<{src: string, alt?: string}> | stores an image collection |
| enablePagination | boolean | determines if pagination is enabled | |
| sliderBar | boolean | determines visability of a slider bar | |
| autoSlide | boolean | determines if automatic slide is enabled | |
| interval | number | time interval between slides in miliseconds | |
| columnCount | number | determines the number of columns for screens wider than 1024px | |
| columnCountTable | number | determines the number of columns for screenswith a width between 600px and 1024px | |
| columnCountMobile | number | determines the number of columns for screens with a width less then 600px | |
| gapX | number | determines space between columns in px | |
| gapY | number | determines space between rows in px |
Slots
This component does not have any slots.
Methods
This component does not have any methods.
Events
This component does not have any events.
Demo
Live Editor
// import '../static/c/image-gallery.wc.js'; <jp-image-gallery images='[{"src": "https://picsum.photos//700"}, {"src": "https://picsum.photos/1280/720"}, {"src": "https://picsum.photos/1920/1080"}, {"src": "https://picsum.photos//800"}, {"src": "https://picsum.photos/900/900"}, {"src": "https://picsum.photos/854/480"}, {"src": "https://picsum.photos/2560/1440"}, {"src": "https://picsum.photos/1000/1000"}, {"src": "https://picsum.photos/800/600"}, {"src": "https://picsum.photos/700/900"}, {"src": "https://picsum.photos/700/700"}, {"src": "https://picsum.photos/1200/1200"}] '> </jp-image-gallery>
Result
Loading...