@zym-com/carousel

Install

npm install @zym-com/carousel

or

yarn add @zym-com/carousel

Basic Usage

import Carousel from "@zym-com/carousel";
import "@zym-com/carousel/dist/style.css";

function App() {
const config = {
    "configuration": {
        "initialSlide": 0,
        "swiperDirection": "horizontal",
        "switchingSpeed": 300,
        "watchOverflow": false,
        "slidesPerView": 4,
        "centeredSlides": true,
        "centeredSlidesBounds": false,
        "slidesPerGroup": 1,
        "spaceBetween": 0,
        "slidesOffsetBefore": 0,
        "slidesOffsetAfter": 0,
        "loop": true,
        "loopAdditionalSlides": 2,
        "loopedSlides": 5,
        "loopFillGroupWithBlank": false,
        "autoplay": false,
        "delay": 3000,
        "reverseDirection": false,
        "pauseOnMouseEnter": true,
        "effect": "fade",
        "slideShadows": false,
        "limitRotation": true,
        "shadow": false,
        "shadowOffset": 20,
        "shadowScale": 0.94,
        "coverflowrotate": 0,
        "coverflowstretch": 0,
        "coverflowdepth": 100,
        "coverflowmodifier": 1,
        "prevSize": {
            "w": 0,
            "h": 0
        },
        "prevPosition": {
            "x": 3,
            "y": 50
        },
        "prevBackgroundColorType": "solidBgColor",
        "prevBgColor": "rgba(24, 144, 255,0.15)",
        "prevBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "prevBgimage": "",
        "prevBgimageSize": "cover",
        "prevBgOpacity": 1,
        "prevBorderStyle": "solid",
        "prevBorderWidth": 2,
        "prevBorderColor": "rgba(24, 144, 255,1)",
        "prevBorderRadius": 0,
        "prevContentType": "icon",
        "prevArrowType": "arrowOutlined",
        "prevArrowcolor": "rgba(255,255,255,1)",
        "prevArrowfontsize": 25,
        "prevText": "上一页",
        "prevTextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "prevImage": "",
        "prevImageSize": {
            "w": 20,
            "h": 30
        },
        "nextSize": {
            "w": 0,
            "h": 0
        },
        "nextPosition": {
            "x": 3,
            "y": 50
        },
        "nextBackgroundColorType": "solidBgColor",
        "nextBgColor": "rgba(24, 144, 255,0.15)",
        "nextBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "nextBgimage": "",
        "nextBgimageSize": "cover",
        "nextBgOpacity": 1,
        "nextBorderStyle": "solid",
        "nextBorderWidth": 2,
        "nextBorderColor": "rgba(24, 144, 255,1)",
        "nextBorderRadius": 0,
        "nextContentType": "icon",
        "nextArrowType": "arrowOutlined",
        "nextArrowcolor": "rgba(255,255,255,1)",
        "nextArrowfontsize": 25,
        "nextText": "上一页",
        "nextTextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "nextImage": "",
        "nextImageSize": {
            "w": 20,
            "h": 30
        },
        "pageType": "launch",
        "pageWidth": "30",
        "pagePosition": {
            "x": 50,
            "y": 95
        },
        "pageFlexDirection": "row",
        "pageSize": {
            "w": 26,
            "h": 26
        },
        "pageBorderRadius": 50,
        "pageBackgroundColorType": "solidBgColor",
        "pageBgColor": "rgba(255, 255, 255,0.1)",
        "pageBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "pageBgimage": "",
        "pageBgimageSize": "cover",
        "pageBgOpacity": 1,
        "pageBorderStyle": "solid",
        "pageBorderWidth": 2,
        "pageBorderColor": "rgba(24, 144, 255,1)",
        "pageTextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "pageActiveSize": {
            "w": 26,
            "h": 26
        },
        "pageActiveBorderRadius": 50,
        "pageActiveBackgroundColorType": "solidBgColor",
        "pageActiveBgColor": "rgba(24, 144, 255,0.15)",
        "pageActiveBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "pageActiveBgimage": "",
        "pageActiveBgimageSize": "cover",
        "pageActiveBgOpacity": 1,
        "pageActiveBorderStyle": "solid",
        "pageActiveBorderWidth": 2,
        "pageActiveBorderColor": "rgba(24, 144, 255,1)",
        "pageActiveTextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "currentShow": true,
        "currentTextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "separateShow": true,
        "separateText": "/",
        "separateTextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "totalShow": true,
        "totalTextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 12,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "dataSeries": [
            {
                "fildType": "global",
                "accurateMatching": true,
                "fildValue": {
                    "field": "",
                    "value": ""
                },
                "numericField": "",
                "valueRange": {
                    "min": "0",
                    "max": "100"
                },
                "domPosition": {
                    "x": 0,
                    "y": 0
                },
                "bgColorSelect": "solidBgColor",
                "solidBgColor": "rgba(24, 144, 255,0.15)",
                "bgAnamorphism": {
                    "startVal": "rgba(255,68,68,1)",
                    "endVal": "rgba(0,0,0,1)",
                    "direction": 180
                },
                "bgimage": "",
                "bgimageSize": "cover",
                "bgtransparency": 1,
                "borderStyle": "solid",
                "borderWidthName": 2,
                "borderColor": "rgba(24, 144, 255,1)",
                "bgborderRadiusName": 0,
                "contentSeries": [
                    {
                        "domType": "image",
                        "contentMapping": "url",
                        "domSize": {
                            "x": 100,
                            "y": 100
                        },
                        "domItemPosition": {
                            "x": "50%",
                            "y": "50%"
                        },
                        "colorSelect": "solidColor",
                        "solidColor": "rgba(255,255,255,1)",
                        "anamorphism": {
                            "startVal": "rgba(255,68,68,1)",
                            "endVal": "rgba(0,0,0,1)",
                            "direction": 180
                        },
                        "textStyle": {
                            "fontFamily": "Microsoft Yahei",
                            "fontSize": 18,
                            "fontWeight": "normal",
                            "letterSpacing": 0,
                            "lineHeight": 18,
                            "fontStyle": "normal"
                        },
                        "levelalignment": "center",
                        "paragraphspacing": 0,
                        "transparency": 1,
                        "shadow": {
                            "shadowOffsetX": 0,
                            "shadowOffsetY": 0,
                            "shadowBlur": 0,
                            "shadowColor": "rgba(255,255,255,1)"
                        },
                        "objectFit": "fill",
                        "borderRadius": "5px",
                        "objectFitVideo": "fill",
                        "opacityVideo": 1,
                        "autoPlayVideo": true,
                        "controlsVideo": true,
                        "loopVideo": false,
                        "mutedVideo": false,
                        "htmlTemplate": "<img src='[%url%]' class='img'/>",
                        "htmlCss": ".img {\r\n    position:absolute;\r\n    object-fit: contain;\r\n    border-radius:5px;\r\n    width:100%;\r\n    height:100%\r\n}",
                        "textShadow": false
                    }
                ],
                "backgroundStyleChild": false,
                "borderStyleChild": false
            }
        ],
        "navigationControl": true,
        "paginationControl": true,
        "prevBackgroundStyleConfig": false,
        "prevBorderStyleConfig": false,
        "prevContentStyleConfig": true,
        "nextBackgroundStyleConfig": false,
        "nextBorderStyleConfig": false,
        "nextContentStyleConfig": true,
        "pageStyleConfig": true,
        "pageActiveStyleConfig": true,
        "pageBackgroundStyleConfig": true,
        "pageBorderStyleConfig": false,
        "pageContentStyleConfig": true,
        "pageActiveBackgroundStyleConfig": true,
        "pageActiveBorderStyleConfig": false,
        "pageActiveContentStyleConfig": true
    },
    "base": {
        "width": 600,
        "height": 400
    },
    "dataSource": [
        {
            "url": "./banner1.png"
        },
        {
            "url": "./banner2.png"
        },
        {
            "url": "./banner3.png"
        },
        {
            "url": "./banner4.png"
        },
        {
            "url": "./banner5.png"
        },
        {
            "url": "./banner6.png"
        }
    ],
    bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
 return (
    <>
      <Carousel {...options} />
    </>
  );
}