Tiny JavaScript carousel library with horizontal scrolling and all the goodness.
Switch branches/tags
Nothing to show
Clone or download



Tiny JavaScript carousel library with horizontal scrolling and all the goodness.

  • Lazy-load images on scroll
  • Scroll animation on item click
  • Responsiveness
  • Very fast & easy to setup
  • Vanilla JavaScript (No jQuery dependency)

Demo: https://portfoliojs.com


Directly refer it in your HTML

<!-- Styles for Portfolio library -->
<link rel="stylesheet" href="https://unpkg.com/portfolio-js@latest/dist/portfolio.css" />

<!-- Include Portfolio library -->
<script src="https://unpkg.com/portfolio-js@latest/dist/portfolio.umd.js"></script>

If you're using bundlers like Webpack, Rollup.js or Parcel.js

npm install --save portfolio-js



<div class="pf-carousel my-image-gallery">
  <div class="pf-slider">
    <div class="pf-item">
      <img class="pf-item-image" data-src="https://example.com/thor.png" />
      <div class="pf-item-description">
        Photo by Jane Foster
    <div class="pf-item">
      <img class="pf-item-image" data-src="https://example.com/hulk_12.png" />
      <div class="pf-item-description">
        Photo by Betty Ross on Unsplash
    <!-- Add more images -->


Once the assets are included as mentioned in install section you can activate Portfolio like this:

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

JavaScript (w/ Bundler)

import 'portfolio-js/dist/portfolio.css';
import Portfolio from 'portfolio-js';

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


Publishing package to npm repository.

npm install
npm version patch # patch|minor|major
npm publish

Deploy (Homepage)

Instructions to deploy homepage - portfoliojs.com.

  • Required only for first time

    git branch gh-pages
    echo "portfoliojs.com" > CNAME
  • Updating existing page

    git checkout gh-pages
    git merge master
    npm install && npm run build-demo
  • Add Google Analytics tracking code and push to remote

    git add . && git commit -am "Releasing updated demo page."
    git push origin gh-pages


Abhinay Omkar