portfolio-js

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
portfolio-js
80262.1.56 years ago6 years agoMinified + gzip package size for portfolio-js in KB

Readme

Portfolio.js
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

Install

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

Usage

HTML
<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>
    </div>
    <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
      </div>
    </div>  
    <!-- Add more images -->
  </div>
</div>
JavaScript
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');

Publish

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

Author

Abhinay Omkar