Easy way to include photoSwiper on your website.

Usage no npm install needed!

<script type="module">
  import easyphotoswiper from 'https://cdn.skypack.dev/easyphotoswiper';




  1. Install the module:
npm install --save-dev easyphotoswiper
  1. Import the module in your JavaScript files:
import EasyPhotoSwiper from 'easyphotoswiper'
  1. Executhe the script:
const PhotoGallery = new EasyPhotoSwiper({
  wrap: '.js-gallery',
  item: '.js-gallery__item',
  link: '.js-gallery__link',
  image: 'img'
  1. Import styles in your SCSS files and setup $images_url variable:
$images_url: '../img/';
@import "node_modules/easyphotoswiper/src/easyphotoswiper";
  1. Grab images and save them in your images folder (src/img):

https://raw.githubusercontent.com/dimsemenov/PhotoSwipe/master/dist/default-skin/default-skin.svg https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/default-skin/default-skin.svg https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/default-skin/preloader.gif

  1. Enjoy!


  1. Your HTML needs to be well prepared, example below:
<div class="c-gallery-list js-gallery">
    <div class="c-gallery-list__item js-gallery__item">
        <div class="c-gallery-item">
            <a href="static/img/pic_gal-01-big.jpg" itemprop="contentUrl" data-size="1140x759" class="c-gallery-item__inner js-gallery__link">
                <figure class="o-image">
                    <img class="o-image__media" src="static/img/pic_gal-01.jpg" alt="" />
  1. Make sure if you have JS class for wrapper, list item and list link.
  2. List link should contain data-size attribute.



  • npm run clean - Remove lib/ directory
  • npm test - Run tests. Tests can be written with ES6 (WOW!)
  • npm test:watch - You can even re-run tests on file changes!
  • npm run cover - Yes. You can even cover ES6 code.
  • npm run lint - We recommend using airbnb-config. It's fantastic.
  • npm run test:examples - We recommend writing examples on pure JS for better understanding module usage.
  • npm run build - Do some magic with ES6 to create ES5 code.
  • npm run prepublish - Hook for npm. Do all the checks before publishing you module.