/pm-Gallery

Primary LanguageTypeScript

pm-Gallery

Micro gallery for your project

pm-Gallery - being developed as a test project within the framework of learning JavaScript

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

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

How install?

  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">
    <div class="pm-gallery__wrapper">
        <div class="pm-gallery__inner pm-gallery__inner--previews">
            <div class="pm-gallery__preview-picture">
                <img src="./images/1.jpg" alt="" />
            </div>
            <div class="pm-gallery__preview-picture">
                <img src="./images/2.jpg" alt="" />
            </div>
        </div>

        <div class="pm-gallery__inner pm-gallery__inner--picture"></div>
    </div>
</div>

Parameters

Name type Default Value Description
objectFit string 'cover' cover | contain | none | fill | scaleDown The 'object-fit' CSS property sets how the content of a replaced main picture
positionPreviews string 'verticalLeft' horizontalBottom | horizontalTop | verticalRight Managing the position of preview images relative to the main picture
animationSlide string 'none' zoom | fade | slide | flip Add animation for slide
pagination boolean false false | true Parameter add pagination
loop boolean false false | true Set to 'true' to enable continuous loop mode
fullScreenMode boolean false false | true Parameter add fullScreen mode. Preview main picture on all screen
swipeOnMainPicture boolean true false | true Add the ability to switch slides by swipe on the main picture
autoPlay number false >1000 Parameter add autoPlay.
activeSlide number 0 number > 0 | number < arr.count Active slide by the set value