Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

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

About

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

Resources

You can’t perform that action at this time.