Author: | paytonshaltis |
---|---|
Views Total: | 311 views |
Official Page: | Go to website |
Last Update: | January 19, 2023 |
License: | MIT |
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)