logo

All Options

Here we have all the configuration about carousel for this v1
const options = {
    slideRadius:"0px", // Radius of the slide corners
    paddingY:"0px", // Vertical padding around the container
    containerRadius:"0px", // Radius of the container corners
    itemsPerPage: 1, // Number of items displayed per page
    itemsPerSlide: 1, // Number of items displayed per slide
    height: "10rem", // set height of carousel unit (%,rem,px,vh) ,
    width: "100%", // set width of carousel unit (%,rem,px) ,
    gap: "2px" , // Space between items unit (px) 
    bgGradientAnimated: false, // Set to true to enable background gradient (only when we have a theme),
    
    applytransparentMaskOnBorder  : false, // set border of carousel : blur 


    theme: "light" // Theme setting, value :  "light" | "dark" | "lightAppl"


    customTheme: {
    primary: "", // Primary color for the theme
    secondary: " ", // Secondary color for the theme
    third: "" // Tertiary color for the theme
  },
    drag:true,
     pagination: {
    enabled: true, // Allow pagination
    defaultDotsStyle: true, // Set default style on indicator
    position: "outside", // Position of pagination, value: inside | outside | center
    wrap: false, // Set wrapper around indicator
    specialWrap: {  // Add special disposition to wrapper
      enabled: false, // Allow special display
      left:"0px", // Left position of wrapper, unit (px,%,rem)
      top:"0px", // Top position of wrapper, unit (px,%,rem)
      justifyContent: "flex-end", // Justify-content display in pagination container
      alignItems: "flex-end",  // Align-items display in pagination container
      orientation: "vertical"  // Orientation of pagination, value: vertical | horizontal
    },
    gap: "0.5rem", // Space between indicators,unit (px)
    sizeButton: "0.3rem" // Size of indicator (Height / width),unit (px,%,rem)
  }
    arrows:{
      enabled: true, // Allow arrows
     // Set to true to hide arrows when inactive
    hideArrowIsInactive: false,
    specialDisplay: {
    // Indicates whether the special display is enabled or not
    enabled: false,

    prevButton: {
      // Positioning of the previous button relative to the container unit (px,%,rem)
      left: "0px", // Offset to the left, 
      top: "0px",  // Offset at the to
    },

    nextButton: {
      // Positioning of the next button relative to the container, unit (px,%,rem)
      left:"0px", // Offset to the left,
      top:"0px",  // Offset at the top,
    }

    // Defines the spacing between child elements in the main direction
    justifyContent: "space-between",

    // Aligns child elements along the cross axis
    alignItems: "center",

    // Defines the spacing between child elements unit(px)
    gap: "0.4px", 


    },

   
  // Indicates whether the main component is enabled or not
  enabled: true,

  // Defines the position of the main component (here, centered)
  position: "center",

  // Indicates whether the component should shake or not (visual effect)
  shake: false,

  // Defines the type of navigation (here, arrow)
  type: "arrow" or "chevron"

  // Defines the size of the navigation buttons unit (px,%,rem)
  sizeButton: "1.8rem",

  // Defines the radius of the navigation arrows (rounded)  unit (px,%,rem)
  arrowRadius:"20px",


    }
}