Responsive Dynamic Customizable Carousel Library – Freighter

Preview:

Description:

Freighter is a responsive, dynamic, flexible, and highly customizable carousel library written using modern JavaScript & CSS techniques.

Features:

• Easy to implement.
• 5 resizing methods to resize carousel items.
• 3 wrapping methods to wrap your carousel.
• Supports dynamic content, meaning you can easily add/remove carousel items.
• Configurable smooth transitions.

How to use it:

1. Install and import the Freighter.

# NPM
$ npm i freighterjs

// ES6 module
import Freighter from 'freighter.js';

<!-- OR UMD -->
<script src="freighter.js"></script>

2. Add your content to the carousel.

<div id="example">
  <!-- Carousel items go here -->
</div>

3. Initialize the carousel and pass the following parameter to the Freighter method.

• containerID: Container ID
• resizingMethod: “none”, “stretch”, “stretch-gap”, “stretch-scale”, or “stretch-populate”
• wrappingMethod: “none” | “wrap-simple” | “wrap-smart”
• properties: Carousel options

// const instance = new Freighter(containerID, resizingMethod, wrappingMethod, properties);
const myCarousel = new Freighter(
      "example",
      "stretch-scale",
      "wrap-simple", 
      {
        // options here
      }
);

4. Available carousel options.

{
  // item width/height/gap in pixels
  itemWidth: 225,
  itemHeight: 150,
  itemSpacing: 0,
  // button styles (an object containing CSS styles)
  buttonStyles: {
    width: "25px",
    height: "80%",
    position: "center",
    borderTop: "none",
    borderRight: "none",
    borderBottom: "none",
    borderLeft: "none",
    backgroundColor: "rgba(100, 100, 100, 0.5)",
    color: "rgba(50, 50, 50, 0.75)",
    cursor: "pointer",
    transition: "all 200ms ease",
  },
  buttonHoverStyles: {
    backgroundColor: "rgba(100, 100, 100, 0.8)",
    transition: "all 200ms ease",
  },
  leftButtonStyles: {
    borderTopRightRadius: "5px",
    borderBottomRightRadius: "5px",
  },
  leftButtonHoverStyles: {},
  rightButtonStyles: {
    borderTopLeftRadius: "5px",
    borderBottomLeftRadius: "5px",
  },
  rightButtonHoverStyles: {},
  // the number of carousel items to show at a time
  numItemsVisible: 1,
  // the number of carousel items be scrolled
  scrollBy: 1,
  // determine whether the scrollBy should be overriden with the numItemsVisible
  syncScrollWithVisibility: false,
  // config the transition effect here
  transitionDuration: 500,
  transitionDelay: 0,
  transitionTimingFunction: "ease-in-out",
  // determine whether the carousel can be manually scrolled
  scrollable: true,
  // determine whether the carousel will scroll on its own
  autoScroll: false,
  autoScrollInterval: 1000,
  autoScrollDirection: 'right', // or 'left'
  autoScrollPauseOnHover: false,
}

5. API method.

// set options
myCarousel.setCarouselProperties(properties);
// get the carousel state
myCarousel.getCarouselState()
// add/remove carousel items
myCarousel.addCarouselItems(items, index)
myCarousel.removeCarouselItems(index, count = 1)