3d-carousel-component 中文文档教程

Question

3d-carousel-component

• 用于 react.js 的经典 3d 旋转木马；✨????

  

  看看 示例

Table of Contents

• Getting Started????
• Customization????
• Examples????
• Issues??????
• Special Mention????

Getting Started????

npm i 3d-carousel-component

import Carousel3D from "3d-carousel-component";

const YourComponent = () => {
  return (
    <Carousel3D
      ContainerStyle={ContainerStyle}
      CardStyle={CardStyle}
      CardList={CardList}
    />
  );
};

Customization????

• 基本上你必须传递三个道具，即：

• ContainerStyle

• CardStyle

• CardList

• 其中前两个用于样式，最后一个包含你的卡列表。

• 请注意所有变量、道具、属性都遵循 UpperCamelCase 规则。*

  ContainerStyle

• 它允许您设置轮播的主要外部容器的样式。

• 以下属性可用：

  Key	Function
  Width	Width of the main container
  Height	Height of the main container
  Padding	Padding of the main container
  Margin	Margin of the main container
  BackgroundColor	Background color of the main container
  Background	Background property

• 查看下面的示例以获得更多理解。

  CardStyle

• 它允许您为轮播的每张卡片设置样式。

• 以下属性可用：

  Key	Function
  Width	Width of each Card
  Height	Height of each Card
  Padding	Padding inside of your Card
  AspectRatio	Defines Aspect ratio of your Card

• 查看下面的示例以获得更多理解。

  CardList

• 它基本上是一组带有 “元素” 键的对象，其中包含您的卡片内容。 可以是您想要的任何内容……嵌入 youtube 视频的轮播怎么样？？？？

Examples????

import Carousel3D from  "3d-carousel-component";

const YourComponent  =  ()  =>  {
    //List of element you want inside carousel.
    const  CardList  = [
        { element:  <div>Card 1</div>, },
        { element:  <div>Card 2</div>, },
        { element:  <div>Card 3</div>, },
        { element:  <div>Card 4</div>, },
        { element:  <div>Card 5</div>, },
        { element:  <div>Card 6</div>, },
        { element:  <div>Card 7</div>, },
        { element:  <div>Card 8</div>, },
    ];
    const ContainerStyle = {
        BackgroundColor:  "Cyan",
        Width:  "100%",
        Padding:  "1em",
        Margin:  "auto",
    };
    const CardStyle = {
        Width:  "100%",
        BackgroundColor: "blanchedalmond",
        Padding:  "0.5em 1em",
    };

    return  <Carousel3D
            ContainerStyle={ContainerStyle}
            CardStyle={CardStyle}
            CardList={CardList}
        />;
};

export defalut YourComponent;

示例代码链接：点击此处

Issues??????

• Having any issues or found any bugs, feel free to reach me on github - click here.????

Special Mention????

• Special Thanks to Akshit Gupta for constant motivation and support.