Downloading

Node Package Manager

The easiest approach to downloading Freighter also happens to be the recommended one, and that is allowing Node Package Manager to handle dependency management. If you would like to view the package on NPM, you can do so here.

Once your NPM project has been initialized, simply use npm install freighterjs to add the package to your project's list of dependencies.

Once done, you can import the package as you normally would for any other package managed by NPM. Keep in minde that Freighter should only be used in the browser (visual carousels are obviously not fir for the NodeJS runtime), so the browser import requires a full path:

import Freighter from './node_modules/freighterjs/Freighter.js';

The above example assumes that your node_modules directory is in the same directory as the script doing the importing; you should adjust the exact import based on your setup. If NPM modules aren't your thing, then you can also use the minified bundles described below.

Minified Bundles

If you would rather have the transpiled and bundled library in one JavaScript file that you can keep contained within a project, then using one of the minified bundles is the way to go. Freighter is bundled with Webpack, and prepared in two different ways depending on the intended target environment.

ES6 Module

ES6 JavaScript Modules use the import and export keywords explicitly to import and export modules, respectively. If you would like to use the ES6 module version of Freighter, you can do so by importing the freighter-x.x.x.js file, available to download on the downloads page.

The syntax for using the module is the same as the NPM approach; simply import Freighter from the file's location in your project directory and start using it:

import Freighter from 'freighter-x.x.x.js';

UMD Module

Universal Module Definition (UMD) Modules is a formalization of several other JavaScript module systems, including:

• Inline <script> tags within HTML documents
• CommonJS modules that utilize the require() import strategy
• AMD modules that utilize the define() import strategy

If you desire a module for one of the systems listed above, or any other systems that come to be supported by UMD, then this is the version of Freighter that you'll want to download. Just like the ES6 version, a UMD version is available on the downloads page.

Below is an example of importing Freighter using an inline <script> tag in an HTML document:

<script src="freighter-x.x.x.js"></script>

<script>
  // Create a new carousel using the container with the ID "myCarousel".
  const myCarousel = new Freighter({
    containerID: 'myCarousel',
    resizingMethod: 'stretch-scale',
    wrappingMethod: 'wrap-simple',
    numItemsVisible: 3,
    scrollBy: 2,
    autoScroll: true,
  });
</script>

Source Code

If you would rather have the source code to Freighter (either to check out how something was implemented or to make your own changes), you can absolutely do so.

The entire development process for Freighter, including its source code, is hosted on GitHub. While you're there, feel free to report any bugs you may find, contribute through a pull request, or even just drop a star on the project!

If you would prefer to have the TypeScript source code from a specific version, the downloads page has every version available for download.