Horizontal Scrollable Carousel In Vanilla JavaScript – Portfolio.js

Portfolio.js is a vanilla JavaScript library to create a responsive, horizontal, scrollable image carousel that has the ability to lazy load images on scroll.

How to use it:

Install the Portfolio.js.

# NPM
$ npm install portfolio-js --save

Or include the following JavaScript and Stylesheet on the webpage.

<link rel="stylesheet" href="portfolio.css">
<script src="portfolio.umd.js"></script>

Add as many images together with descriptions to the carousel. Note that you must embed your images using the data-src attribute for the lazy load functionality.

<div class="pf-carousel my-image-gallery">
  <div class="pf-slider">
    <div class="pf-item">
      <img class="pf-item-image" data-src="1.jpg" />
      <div class="pf-item-description">
        Description 1
      </div>
    </div>
    <div class="pf-item">
      <img class="pf-item-image" data-src="2.jpg" />
      <div class="pf-item-description">
        Description 2
      </div>
    </div>
    <div class="pf-item">
      <img class="pf-item-image" data-src="3.jpg" />
      <div class="pf-item-description">
        Description 3
      </div>
    </div>
    ...
  </div>
</div>

Initialize the Portfolie.js and done.

new Portfolio(document.querySelector('.my-image-gallery'));