search

paytonshaltis / freighter

🚂 Freighter is a highly-customizable HTML carousel library featuring a number of dynamic properties affecting carousel items and transitions. Most prominently, it gives complete control over the resizing method (for responsive layouts) as well as the wrapping method (for content display).
https://paytonshaltis.github.io/freighter
MIT License
1 stars 0 forks source link
carousel carousel-slider css freighter freighterjs html javascript library responsive slider typescript

readme

Freighter Logo

[![Version](https://img.shields.io/npm/v/freighterjs?style=flat-square&logo=npm)](https://npmjs.com/package/freighterjs) [![Activity](https://img.shields.io/github/last-commit/paytonshaltis/freighter/main?style=flat-square&logo=github)](https://github.com/paytonshaltis/freighter/commits/main)

Freighter - The Responsive Carousel Library

Create responsive, dynamic, and customizable carousels. Control the wrapping and resizing behavior with a variety of built-in methods for ensuring your carousel looks great and works well on any device. Style and customize your carousel with properties including autoscroll behavior, specialized transitions, number of items to show and scroll by, and many more.

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 whose environment is using ES6 modules. Notice that the Freighter class is imported; for environments that import modules differently (require(), etc.), see the downloads page for the UMD module.

import Freighter from "freighter-1.0.2.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!