Package Exports

portfolio-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (portfolio-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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