@zym-com/carousel
v0.0.8
Published
轮播图
Downloads
1
Readme
Install
npm install @zym-com/carouselor
yarn add @zym-com/carouselBasic 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} />
</>
);
}