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

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