Pm-Gallery.js

Pm-Gallery.js - A simple yet powerful responsive image gallery

With pm-Gallery, you can create professional-quality visual content.

1. Demo page
2. How usage?
3. Example
4. Parameters

---

How usage?

1. npm i pm-gallery
2. Add files:
   HEAD - pm-gallery-style.css
   Scripts - pm-gallery.js
3. Init:

new PmGallery(".pm-gallery", {});

Example:

<div class="pm-gallery">
    <img src="./images/img-small-1.svg" data-src="./images/img-large-1.svg" alt="img" />
    <img src="./images/img-small-2.svg" data-src="./images/img-large-2.svg" alt="img" />
    <img src="./images/img-small-3.svg" data-src="./images/img-large-3.svg" alt="img" />
</div>

---

Parameters

Name	type	Default	Value	Description
positionPreviews	string	'left'	'top' | 'bottom' | 'left'| 'right'	Positioning of preview images relative to the gallery
objectFitPicture	string	'cover'	'fill' | 'contain' | 'cover' | 'scaleDown' | 'none'	Adds the 'object-fit' class for the main image
visiblePreviews	boolean	true	true | false	Image preview visibility
onCenterPreviews	boolean	true	true | false	Center previews in horizontal mode
pagination	boolean	false	true | false	Pagination visibility
swipeSlider	boolean	true	true | false	Swipe on main picture
loop	boolean	false	true | false	Set to true to enable continuous loop mode
countPreSlides	number	4	number	Count of preview images
spaceBetween	number	10	number	Distance between preview images - px
previewWidth	number	100	number	Width of the preview image - px
previewHeight	number	100	number	Height of the preview image - px
speedAnimScroll	number	300	number	Scrolling speed of preview images
breakpoints	object	{}	-	Object with parameters for responsive mode Parameters
fullScreen	object	{}	-	Object with parameters for fullScreen mode Parameters
borderRadius	number | boolean	4	false | count	The options adds border radius for images
autoPlay	number | boolean	false	false | count	Automatic slide change
animSlide	string | boolean	false	false | 'fade' | 'flipInX' | 'zoomIn' |	Animation of the slide change