boxparade-carousels-react

Boxparade Carousels React is a JavaScript library for automatically generating website carousels.

Note: It may be necessary to add some styling to your carousel container to get it to display appropriately. Use virtual width (vw) to set the width and height of the container.

Usage

import ASTRONOMY from "../../../assets/images/jr-korpa-9XngoIpxcEo-unsplash(1).jpg";
import CITY from "../../../assets/images/pexels-george-desipris-1121097.jpg";
import FANTASY from "../../../assets/images/pexels-vinicius-vieira-ft-4424355.jpg";
import LION from "../../../assets/images/sandro-katalina-k1bO_VTiZSs-unsplash.jpg";

import { executeCarousel } from "boxparade-carousels-react";

const App = () => {
  const [data, setData] = useState({
    id: "carousel" /*ID for your carousel (must be unique)*/,
    type: "3d-rotate" /* There are over 20 carousel types*/,
    automate: false /*Automatically allow the carousel to rotate*/,
    imageScale: "fill",
    cardScale: 1.5,
    performanceMode: true,
    bottomNavButtons: {
      size: 1,
      shape: "diamond",
    },
    navArrow: {
      size: 2,
    },
    styling: {
      width: "90%",
    },
    items: [
      {
        image: ASTRONOMY,
        title: "Boxparade.GraphX 3.0",
        link: {
          target: "_parent",
          value: "View Old Site",
          link: "https://graphx.boxparade.app",
        },
        styling: {
          linkStyle: {
            backgroundColor: "rgba(0,0,0,.7)",
            color: "#fff",
            textDecoration: "none",
            borderRadius: 30,
            fontFamily: '"Chakra Petch", sans-serif',
            fontSize: 2,
          },
        },
      },
      {
        image: CITY,
        title: "Boxparade.Mobile",
      },
      {
        image: FANTASY,
        title: "Boxparade.Dashboards",
      },
      {
        image: LION,
        title: "Boxparade.Launch",
      },
    ],
  });

  useEffect(() => {
    executeCarousel(data);
  }, []);

  return <div id={data.id} />;
};

const root = createRoot(document.getElementById("root"));
root.render(<App />);

CarouselType (Model)

Note: The model below is the complete model for creating carousels which you can use in your application.

type Positions =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

type Transitions =
  | "cubic-bezier"
  | "linear"
  | "ease-in"
  | "ease-in"
  | "ease-out"
  | "ease-in-out"
  | "none"
  | string;

interface NavArrow {
  backgroundColor?: string;
  border?: string;
  style?: "modern" | "traditional" | "filled" | "traditional-filled";
  leftArrowText?: CarouselMainText;
  rightArrowText?: CarouselMainText;
  size?: 1 | 2 | 3;
}

interface BottomNavButton {
  type?: "fade" | "morph" | "none";
  color?: string;
  inactiveColor?: string;
  border?: string;
  shape?: "round" | "square" | "triangle" | "diamond";
  size?: 1 | 2 | 3;
  transition?: Transitions;
  showPagination: boolean;
}

interface CarouselMainText {
  value: string;
  color?: string;
  size?: 1 | 2 | 3;
  fontFamily?: string;
}

interface CarouselText {
  color?: string;
  size?: 1 | 2 | 3;
  fontFamily?: string;
}

interface CarouselItem {
  image?: string;
  title?: CarouselText | string;
  subtitle?: CarouselText | string;
  details?: CarouselText | string;
  styling?: CardDetailStyling;
  link?: CarouselLink;
}

interface CarouselLink {
  link?: string;
  target?: "_blank" | "_self" | "_parent" | "_top" | string;
  value?: string;
}

interface Dimensions {
  width: number;
  height: number;
}

interface LinkStyling {
  backgroundColor?: string;
  borderRadius?: number;
  fontFamily?: string;
  fontSize: 1 | 2 | 3;
  padding: number;
  color?: string;
  textDecoration?: string;
}

interface AnimationStyle {
  animation?: "appear" | "slide" | "slide-appear" | "none";
  slideDirection?: "left" | "right" | "top" | "bottom" | "none";
  timing?: number;
  transition?: Transitions;
}

interface CardDetailStyling {
  cardDetailPosition?: Positions;
  backgroundColor?: string;
  tintColor?: string;
  detailBackgroundColor?: string;
  detailAnimation?: AnimationStyle;
  padding?: number | string;
  width?: number | string;
  height?: number | string;
  borderRadius?: number | string;
  fontFamily?: string;
  fontSize?: 1 | 2 | 3;
  textColor?: string;
  textAlignment?: "left" | "center" | "right";
  linkStyle?: LinkStyling;
  titleStyle?: CarouselText;
  subtitleStyle?: CarouselText;
  detailStyle?: CarouselText;
}

export default interface CarouselType {
  id: string;
  type?:
    | "slide-l"
    | "slide-r"
    | "slide-t"
    | "slide-b"
    | "fade"
    | "book-l"
    | "book-r"
    | "book-c"
    | "book-t"
    | "book-b"
    | "3d-rotate"
    | "3d-rotate-t"
    | "3d-rotate-b"
    | "spotlight-rotate"
    | "spotlight-rotate-t"
    | "spotlight-rotate-b"
    | "wipe-l"
    | "wipe-r"
    | "wipe-t"
    | "wipe-b"
    | "scale"
    | "headline"
    | "looney-tune"
    | "none";
  transition?:
    | "cubic-bezier"
    | "linear"
    | "ease-in"
    | "ease-in"
    | "ease-out"
    | "ease-in-out"
    | "none"
    | string;
  showNavArrows?: boolean; /* show or hide the navigation arrows */
  showBottomNavButtons?: boolean; /* show or hide the bottom navigation arrows */
  timing?: number; /* how long the animation will last */
  delay?: number; /* the delay before the start of the next animation (Only necessary when using automate)*/
  automate?: boolean; /* true or false to allow the carousel to rotate on it's own*/
  reversableAutomation?: boolean; /* pressing the forwards or backwards arrow will change the direction of the animation*/
  navArrow?: NavArrow; /* add your own styling to the left and right navigation arrows */
  dimensions?: Dimensions; /* adjust the width and height dimensions of the cards (Only necessary for 3d or spotlight carousel types)*/
  imageScale?: "fit" | "fill" | "auto"; /* a way to size images in relation to the container */
  cardScale?: number; /* adjusts the scale of image cards relative to its container. (Only works for 3d and Spotlight)*/
  performanceMode?: boolean; /* Adjusts the speed and smoothness of the carousel at the expense of image quality */
  styling?: CardDetailStyling; /* allows for more in depth styling of the carousel items*/
  bottomNavButtons?: BottomNavButton; /* Add your own styling to the bottom navigation pane */
  items: Array<CarouselItem>; /* a list of your carousel items to display (Must be at least one)*/
}

Website

https://boxparade.app