Documentation

Full documentation for Freighter can be found on the official documentation website for Freighter. Here, you will find detailed download instructions, detailed descriptions of all carousel properties, and useful demos for inspiration.

Downloading

Visit the downloads page of the Freigher website to find every version of Freighter in all downloadable formats, including the original TypeScript source, JavaScript UMD and ES6 bundles, and the NPM release.

Usage

All Carousel Examples

See the official documentation for more detailed examples, code snippets, and live examples.

Usage Basics

In order to create a Freighter carousel, you will need a <div> with some unique id, which will be targeted and act as the outermost container for your carousel. This element should contain as many other <div>s as you'd like, each of which will become a carousel item.

Use the Freighter() constructor to convert the element into a carousel. Note that this code should execute after the element has been loaded to the DOM, otherwise, it will not be found. The constructor requires your container's id, a valid resizing method, a valid wrapping method, and a CarouselProperties object containing any other customizable carousel properties that you wish to initialize your carousel with. All of the properties within this object can be changed later with methods such as setCarouselProperties(), making Freighter carousels dynamic.

Below is an example of calling the constructor in a JavaScript file being accessed by the browser. Please note the full path to the Freighter.js file, which is required for the browser to find the file when utilizing node modules:

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

const myCarousel = new Freighter(
  "container-id",
  "stretch-scale",
  "wrap-smart",
  {
    numItemsVisible: 3,
    scrollBy: 1,
    itemHeight: 3,
    itemWidth: 5,
    transitionDuration: 250,
  }
);

Next Steps

Eager to learn more about creating responsive carousels? Check out these links for recommended next steps!

• Learn about the powerful resizing and wrapping methods.
• Get an overview of all dynamic carousel properties that can be used to customize your carousel.
• Check out some carousel demos to see what's possible with Freighter and spark some inspiration for your next project.