antd#Carousel JavaScript Examples

render() {
        return (
            <div>
                <Card title="文字背景轮播" className="card-wrap">
                    <Carousel autoplay effect="fade">
                        <div><h3>Ant Motion Banner - React</h3></div>
                        <div><h3>Ant Motion Banner - Vue</h3></div>
                        <div><h3>Ant Motion Banner - Angular</h3></div>
                    </Carousel>
                </Card>

                <Card title="图片轮播" className="card-wrap">
                    <Carousel autoplay effect="fade">
                        <div>
                            <img src="/carousel-img/carousel-1.jpg" alt=""/>
                        </div>
                        <div>
                            <img src="/carousel-img/carousel-2.jpg" alt=""/>
                        </div>
                        <div>
                            <img src="/carousel-img/carousel-3.jpg" alt=""/>
                        </div>
                    </Carousel>
                </Card>
            </div>
        );
    }

Home = () => {
  return (
    <div className="home">
      <Header />

        
      <Carousel effect="fade" autoplay autoplaySpeed="10"> 
        <div>
          <h3>FCT Project Manager</h3>
        </div>
        <div>
          <h3>Una gestión centralizada</h3>
        </div>
        <div>
          <h3>Tecnologias, Kanban y Evaluación</h3>
        </div>
        <div>
          <h3>Powered by DAW</h3>
        </div>
      </Carousel>
    </div>
  );
}

General20 = () => {
  return (
    <div className={style.carousel}>
      <Carousel>
        <div className="height-150 pt-4 pl-4 overflow-hidden position-relative bg-light">
          <h2 className="font-size-24 font-weight-bold">To Do</h2>
          <a className="font-size-18" href="#">
            Upgrade / Finish
          </a>
          <i className={`${style.icon} fe fe-settings text-gray-4`} />
        </div>
        <div className="height-150 pt-4 pl-4 overflow-hidden position-relative bg-light">
          <h2 className="font-size-24 font-weight-bold">Sales Growth</h2>
          <a className="font-size-18" href="#">
            View Report
          </a>
          <i className={`${style.icon} fe fe-server text-gray-4`} />
        </div>
      </Carousel>
    </div>
  )
}

General20v1 = () => {
  return (
    <div className={style.carousel}>
      <Carousel>
        <div className="height-150 pt-4 pl-4 overflow-hidden position-relative bg-light">
          <h2 className="font-size-24 font-weight-bold">Sales Growth</h2>
          <a className="font-size-18" href="#">
            View Report
          </a>
          <i className={`${style.icon} fe fe-server text-gray-4`} />
        </div>
        <div className="height-150 pt-4 pl-4 overflow-hidden position-relative bg-light">
          <h2 className="font-size-24 font-weight-bold">To Do</h2>
          <a className="font-size-18" href="#">
            Upgrade / Finish
          </a>
          <i className={`${style.icon} fe fe-settings text-gray-4`} />
        </div>
      </Carousel>
    </div>
  )
}

Index = memo(function Index(props) {
  return (
    <>
      <Carousel autoplay>
          <div>
            <img src="https://img30.360buyimg.com/sku/jfs/t1/160182/1/12734/114962/6048676eE8368ce21/56a7f2c626e66aaf.jpg" alt="" />
          </div>
          <div>
            <img src="https://img30.360buyimg.com/sku/jfs/t1/160182/1/12734/114962/6048676eE8368ce21/56a7f2c626e66aaf.jpg" alt="" />
          </div>
      </Carousel>
    </>
  )
})

storiesOf('antd/carousel', module).add('autoplay', () => 
  <Carousel autoplay>
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Timing of scrolling to the next card/picture.</p></>) } });

storiesOf('antd/carousel', module).add('basic', () => 
  <Carousel afterChange={onChange}>
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Basic usage.</p></>) } });

storiesOf('antd/carousel', module).add('fade', () => 
  <Carousel effect="fade">
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Slides use fade for transition.</p></>) } });

PositionCarouselDemo = () => {
  const [dotPosition, setDotPosition] = React.useState('top');

  const handlePositionChange = ({ target: { value } }) => {
    setDotPosition(value);
  };

  return (
    <>
      <Radio.Group onChange={handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
        <Radio.Button value="top">Top</Radio.Button>
        <Radio.Button value="bottom">Bottom</Radio.Button>
        <Radio.Button value="left">Left</Radio.Button>
        <Radio.Button value="right">Right</Radio.Button>
      </Radio.Group>
      <Carousel dotPosition={dotPosition}>
        <div>
          <h3 style={contentStyle}>1</h3>
        </div>
        <div>
          <h3 style={contentStyle}>2</h3>
        </div>
        <div>
          <h3 style={contentStyle}>3</h3>
        </div>
        <div>
          <h3 style={contentStyle}>4</h3>
        </div>
      </Carousel>
    </>
  );
}

function AppHero() {
  const [current,setcurrent ] = React.useState(0);
  const slider = React.useRef();
  const H = useHistory();
  return (
    <div id="hero" className="heroBlock">
      <Carousel
        // autoplay
        // arrows 
        // dots={false}
        ref={ref => {
         
          slider.current = ref;
        }}
        effect="fade">
        {items.map(item => {
          return (
            <div key={item.key} className="container-fluid">
              <div className="content">
                <h3>{item.title}</h3>
                <p>{item.content}</p>
                <div className="btnHolder">
                  <Button type="primary" size="large" onClick={()=>{
                    if(item.title==="sign in"){
                      H.push("./signin");
                    }else if(item.title==="sign up"){
                        H.push("./signup");
                    }
                    else if(item.key==="1"){
                      slider.current.goTo(1);
                    }
                    
                  }}>{item.bcontent}</Button>
                  <Button type="primary" onClick={()=>{
                    if(item.key==="1"){
                      slider.current.goTo(2);
                    }else {
                      slider.current.goTo(0);
                      
                    }
                   
                  }} className="mx-3" size="large">{item.bcontent1}</Button>
                </div>
              </div>
            </div>  
          );
        })}
      </Carousel>
    </div>
  );
}

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <Carousel afterChange={onChange}>
          <div>
            <div
              style={{
                height: '160px',
                textAlign: 'center',
                lineHeight: '160px',
                background: '#364d79',
              }}
            >
              <h3 style={{ lineHeight: '160px', color: '#fff' }}>1</h3>
            </div>
          </div>
          <div>
            <div
              style={{
                height: '160px',
                textAlign: 'center',
                lineHeight: '160px',
                background: '#364d79',
              }}
            >
              <h3 style={{ lineHeight: '160px', color: '#fff' }}>2</h3>
            </div>
          </div>
          <div>
            <div
              style={{
                height: '160px',
                textAlign: 'center',
                lineHeight: '160px',
                background: '#364d79',
              }}
            >
              <h3 style={{ lineHeight: '160px', color: '#fff' }}>3</h3>
            </div>
          </div>
          <div>
            <div
              style={{
                height: '160px',
                textAlign: 'center',
                lineHeight: '160px',
                background: '#364d79',
              }}
            >
              <h3 style={{ lineHeight: '160px', color: '#fff' }}>4</h3>
            </div>
          </div>
        </Carousel>
      </div>
    )
  }

render(){
    const { current} = this.state
    const cardContent = `<ul class="card-ul">
            <li>当有一组平级的内容</li>
            <li>当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现</li>
            <li>常用于一组图片或卡片轮播</li>
          </ul>`
    return (
      <div>
        <CustomBreadcrumb arr={['显示','轮播图']}/>
        <TypingCard source={cardContent} height={206}/>
        <Card title='基本用法'>
          <Carousel speed={100} arrows afterChange={(current)=>this.setState({current})} autoplay>
            <div>
              <div className='slider-item' style={{background:'#364d79'}}>
                <h3 className={current === 0 ? this.animations[0] : ''}>Ant Design of React</h3>
                <p className={current === 0 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
              </div>
            </div>
            <div>
              <div className='slider-item' style={{background:'#64cbcc'}}>
                <h3 className={current === 1 ? this.animations[0] : ''}>Ant Design of React</h3>
                <p className={current === 1 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
              </div>
            </div>
            <div>
              <div className='slider-item' style={{background:'sandybrown'}}>
                <h3 className={current === 2 ? this.animations[0] : ''}>Ant Design of React</h3>
                <p className={current === 2 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
              </div>
            </div>
            <div>
              <div className='slider-item' style={{background:'darkseagreen'}}>
                <h3 className={current === 3 ? this.animations[0] : ''}>Ant Design of React</h3>
                <p className={current === 3 ? this.animations[1] : ''}>The Fast Way Use Animation In React</p>
              </div>
            </div>
          </Carousel>
        </Card>
      </div>
    )
  }

BannerComp = memo((props) => {
  const [currIndex, setCurrIndex] = useState(0);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getBannerListAsyncAction());
  }, [dispatch]);
  const { banners } = useSelector(
    (state) => ({
      banners: state.getIn(["recommendReducer", "bannersList"]),
    }),
    shallowEqual
  );
  const bannerRef = useRef();
  const bannerChange = useCallback((from, to) => {
    // console.log(from);

    setCurrIndex(to);
  }, []);
  const bgImage =
    banners[currIndex] &&
    `${banners[currIndex]["imageUrl"]}?imageView&blur=40x20`;
  return (
    <WrapperContainer bgImage={bgImage}>
      <section className="banner wrap_730_center">
        <LeftContainer>
          <Carousel
            effect="fade"
            beforeChange={bannerChange}
            ref={bannerRef}
            autoplay
          >
            {banners.map((item, index) => {
              return (
                <div className="banner-item" key={item.imageUrl}>
                  <img
                    className="image"
                    src={item.imageUrl}
                    alt={item.typeTitle}
                  />
                </div>
              );
            })}
          </Carousel>
        </LeftContainer>
        <RightContainer></RightContainer>
        <BannerControl>
          <a className="left btn" onClick={(e) => bannerRef.current.prev()}></a>
          <button
            className="right btn"
            onClick={(e) => bannerRef.current.next()}
          ></button>
        </BannerControl>
      </section>
    </WrapperContainer>
  );
})

render() {
    const theme = this.props.theme;
    const { ticker, currentMarket, exchange } = this.props;

    // Find base price
    const { prices } = this.props.legalPrice;
    let price = '-';
    let priceUnit = this.props.legalPrice.legal;
    let priceLabel = <I s="Last Price" />;
    let priceLabelValue = `${ticker.close} ${currentMarket.quoteTokenSymbol}`;
    let usdPriceLabelValue = ``; // USD Price

    const marketConfig = config.getMarketByPair(
      currentMarket.current,
      exchange.markets
    ) || {
      precisionForPrice: 6,
    };

    // If it fails to get price, use default value.
    try {
      const result = prices.filter(
        (x) => x.symbol === currentMarket.quoteTokenSymbol
      );
      if (result) {
        price = (result[0]['price'] * ticker.close).toFixed(
          marketConfig.precisionForPrice
        );
        if (!isNaN(price)) {
          priceLabelValue = `${ticker.close} ${currentMarket.quoteTokenSymbol}`; // USDT Price
          usdPriceLabelValue = `(${price} ${priceUnit})`;
        }
      }
    } catch (error) {}

    return (
      <div
        style={{
          borderBottomStyle: 'none',
        }}
      >
        <Menu
          selectedKeys={[]}
          mode="horizontal"
          theme="dark"
          style={{
            background: theme.secondaryNavbarBackground,
          }}
        >
          <Menu.Item
            key="current-market"
            style={{
              width: AppLayout.tradePanelWidth,
              height: '53px',
              background: theme.sidePanelBackground,
              paddingLeft: AppLayout.sidePadding,
              paddingRight: AppLayout.sidePadding,
            }}
          >
            <Popover
              overlayClassName="marketSelection"
              placement="bottomLeft"
              title={null}
              content={
                <MarketSelector
                  isVisible={this.state.modalVisible}
                  closePopover={() => {
                    this.setModalVisible(false);
                  }}
                />
              }
              trigger="click"
              visible={this.state.modalVisible}
              onVisibleChange={this.handleClickChange}
            >
              <SelectMarketButton
                block
                onClick={() => this.setModalVisible(true)}
              >
                <span
                  style={{
                    width: '94%',
                    textAlign: 'left',
                  }}
                >
                  {currentMarket.current}
                </span>
                <TickerBarStatusIcon />
              </SelectMarketButton>
            </Popover>
          </Menu.Item>
          <MenuItem
            key="current-market-trade-price"
            selectable={false}
            style={{
              paddingLeft: '12px',
            }}
          >
            <RegularTextSpan>{priceLabel}</RegularTextSpan>
            <MenuHighlightTextSpan>{priceLabelValue}</MenuHighlightTextSpan>
            <MenuHighlightTextSpan
              style={{
                pointerEvents: 'stroke',
              }}
              data-tip="Price Oracle Powered by Band Protocol"
            >
              {usdPriceLabelValue}
            </MenuHighlightTextSpan>
            <StyledReactTooltip backgroundColor="#4a4f59" />
          </MenuItem>
          <MenuItem key="current-market-trade-change" selectable={false}>
            <RegularTextSpan>
              <I s="24h Change" />
            </RegularTextSpan>
            <MenuHighlightTextSpan
              style={{
                color: ticker.percentChange24h.startsWith('-')
                  ? theme.downColor
                  : theme.upColor,
              }}
            >
              {ticker.percentChange24h}
            </MenuHighlightTextSpan>
          </MenuItem>
          <MenuItem key="current-market-trade-volume" selectable={false}>
            <RegularTextSpan>
              <I s="24h Volume" />
            </RegularTextSpan>
            <MenuHighlightTextSpan>
              {ticker.volume} {currentMarket.quoteTokenSymbol}
            </MenuHighlightTextSpan>
          </MenuItem>
          <MenuItem key="current-market-trade-high" selectable={false}>
            <RegularTextSpan>
              <I s="High" />
            </RegularTextSpan>
            <MenuHighlightTextSpan>
              {ticker.high} {currentMarket.quoteTokenSymbol}
            </MenuHighlightTextSpan>
          </MenuItem>

          <MenuItem key="current-market-trade-low">
            <RegularTextSpan>
              <I s="Low" />
            </RegularTextSpan>
            <MenuHighlightTextSpan>
              {ticker.low} {currentMarket.quoteTokenSymbol}
            </MenuHighlightTextSpan>
          </MenuItem>

          <Menu.Item
            key="market-available"
            style={{
              float: 'right',
              paddingLeft: '0px',
              paddingRight: '24px',
              cursor: 'default',
              display: 'none',
            }}
          >
            <Carousel
              autoplay
              dots={false}
              speed={5000}
              style={{
                width: '225px',
                fontSize: '0.85rem',
                fontWeight: '600',
                userSelect: 'none',
                height: AppLayout.tickerBarHeight,
              }}
            >
              <div>
                <div
                  style={{
                    float: 'right',
                    height: AppLayout.tickerBarHeight,
                    lineHeight: AppLayout.tickerBarHeight,
                    color: theme.green,
                  }}
                >
                  <span style={{ color: theme.green }}>
                    <FontAwesomeIcon icon={faDotCircle} />{' '}
                    <I s="Market Available" />
                  </span>
                </div>
              </div>
            </Carousel>
          </Menu.Item>
        </Menu>
      </div>
    );
  }

render() {
    const { tradeload, Loading, config } = this.props;
    const { homepage, goodlist, categorylist, bannervisible, entervisible, modalData, _visible,} = this.state;
    const _moudel = []
    let _moudelConfig = homepage._module
    if (config && config.subscription_switch === false)
      _moudelConfig = _moudelConfig.filter(({module}) => (module !==  "periodic"))
    _moudelConfig.map(item => {
      if (item.active) {
        _moudel.push({ ...item, url: item['module'] })
      }
    })
    const selectlist = {
      'goods':{ name:'商品详情', label:'goods_info', listdata: goodlist, api: "goods/searchGoodsData" },
      'goods_type':{ name:'商品类型', listdata: _moudel },
      'category':{ name:'商品分类', label:'name',
        listdata: categorylist.filter(item => item.is_active),
        api: "goods/fetchCategory"}
    }

    const wh = window.screen.height;

    const bannercolumn = [
      {
        title: '轮播图',
        dataIndex: 'image',
        key: 'image',
        render: (t) => <img src={t.file} width={60}/>
      },
    ];
    const entercolumn = [
      {
        title: '入口',
        dataIndex: 'image',
        key: 'image',
        render: (t) => <img src={t.file} width={40}/>
      },
      {
        title: '名称',
        dataIndex: 'label',
        key: 'label',
      },
    ];
    const jumpColumn = [
      {
        title: '跳转设置',
        dataIndex: 'jump_type',
        key: 'jump_type',
        render: (t,r) => this.parseLabel(t,r,selectlist),
      },
    ];
    const actionColumn_b = [
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 110,
        render: (t, r) => (
          <Fragment>
          <span onClick={() =>
            this.delModal('homebanner',r.url, this.parseLabel(r.jump_type,r,selectlist,'delete'))}>
            <a>删除</a>
          </span>
            <Divider type="vertical" />
            <span onClick={() => this.openModal(r,'banner')}>
            <a>编辑</a>
          </span>
          </Fragment>
        ),
      },
    ];
    const actionColumn_e = [
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 110,
        render: (t, r) => (
          <Fragment>
          <span onClick={() =>
            this.delModal('shortcut',r.url,this.parseLabel(r.jump_type,r,selectlist,'delete'))}>
            <a>删除</a>
          </span>
            <Divider type="vertical" />
            <span onClick={() => this.openModal(r,'enter')}>
            <a>编辑</a>
          </span>
          </Fragment>
        ),
      },
    ];
    const indexpartColums = [
      {
        title: '模块',
        dataIndex: 'label',
        key: 'label',
      },
      {
        title: '是否启用',
        dataIndex: 'active',
        key: 'active',
        render: (t,r) => <span onClick={() => this.parthandle(r)} style={{ cursor: 'pointer' }}>
          { t ? <Icon type="check-circle" theme="filled" style={{ color: 'green' }}/>
            : <Icon type="close-circle" theme="filled" style={{ color: 'red' }}/>
          }
          </span>
      },
    ];

    return (
      <PageHeaderWrapper>
        <Spin spinning={tradeload}>
          <Row gutter={16} type="flex">
            <Col sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 14 }} xl={{ span: 16 }}>
              <Card className={styles.main} title="首页轮播图设置"
                    extra={homepage.homebanner.length <= 4 && <Button type="primary" size="small" onClick={() => this.openModal({},'banner')}>新增</Button>}>
                <TableDrag dataSource={homepage.homebanner} columns={[...bannercolumn,...jumpColumn,...actionColumn_b]}
                           onChange={(e) => this.handleDrag(e,'homebanner')}/>
                <Modal
                  title="轮播图设置"
                  centered
                  zIndex={1001}
                  visible={bannervisible}
                  onOk={() => this.state.request && this.setState({request:false}, () => this.handleOk('homebanner'))}
                  onCancel={() => this.setState({ bannervisible: false })}>
                  <Spin spinning={Boolean(Loading)}>
                    <Form className={styles.editform}>
                      <FormItem label="轮播图片" help="支持jpg、jpeg、png格式，大小不超过2MB，建议尺寸为750*480">
                        <UploadImage
                          limit={1}
                          fileList={modalData.image ? [modalData.image] : []}
                          openSource={!modalData.image}
                          onChange={(e,list) => this.handleUpload(e,'image',list)}
                          handleSource={() => this._openModal(!modalData.image)}
                          restprops={{ openFileDialogOnClick: false }}
                        />
                      </FormItem>
                      <FormItem label="跳转类型">
                        <Select value={modalData.jump_type} onChange={(e) => this.handlelevel('jump_type', e)}>
                          <Option key="goods">商品详情</Option>
                          <Option key="goods_type">商品类型</Option>
                          <Option key="category">商品分类</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="跳转内容">
                        <SelectSearch
                          datalist={selectlist[modalData.jump_type] && selectlist[modalData.jump_type].listdata || goodlist}
                          value={modalData.link}
                          searchKey={modalData.jump_type === 'goods' ? 'k' : 'name'}
                          dispatchType={selectlist[modalData.jump_type] && selectlist[modalData.jump_type].api}
                          onChange={(e) => this.handlelevel('link', e)}/>
                      </FormItem>
                    </Form>
                  </Spin>
                </Modal>
              </Card>
              <Card className={styles.main} title="快速入口设置"
                    extra={homepage.shortcut.length <= 7 && <Button type="primary" size="small" onClick={() => this.openModal({},'enter') }>新增</Button>}>
                <TableDrag dataSource={homepage.shortcut} columns={[...entercolumn,...jumpColumn,...actionColumn_e]}
                           onChange={(e) => this.handleDrag(e,'shortcut')}/>
                <Modal
                  title="快速入口设置"
                  centered
                  zIndex={1001}
                  visible={entervisible}
                  onOk={() => this.state.request && this.setState({request:false}, () => this.handleOk('shortcut'))}
                  onCancel={() => this.setState({ entervisible: false })}
                >
                  <Spin spinning={Boolean(Loading)}>
                    <Form className={styles.editform}>
                      <FormItem label="快速入口图片" help="支持jpg、jpeg、png格式，大小不超过2MB，建议尺寸为90*90">
                        <UploadImage
                          limit={1}
                          fileList={modalData.image ? [modalData.image] : []}
                          openSource={!modalData.image}
                          onChange={(e,list) => this.handleUpload(e,'image',list)}
                          handleSource={() => this._openModal(!modalData.image)}
                          restprops={{ openFileDialogOnClick: false }}
                        />
                      </FormItem>
                      <FormItem label="快速入口名称">
                        <Input style={{ width:'300px' }}
                               value={modalData.label}
                               onChange={(e) => this.handlelevel('label', e.target.value)}/>
                      </FormItem>
                      <FormItem label="跳转类型">
                        <Select value={modalData.jump_type} onChange={(e) => this.handlelevel('jump_type', e)}>
                          <Option key="goods_type">商品类型</Option>
                          <Option key="category">商品分类</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="跳转内容">
                        <SelectSearch
                          datalist={selectlist[modalData.jump_type] && selectlist[modalData.jump_type].listdata || categorylist}
                          value={modalData.link}
                          dispatchType={selectlist[modalData.jump_type] && selectlist[modalData.jump_type].api}
                          onChange={(e) => this.handlelevel('link', e)}/>
                      </FormItem>
                    </Form>
                  </Spin>
                </Modal>
              </Card>
              <Card className={styles.main} title="首页模块设置">
                <Table dataSource={_moudelConfig} size="small" columns={indexpartColums} pagination={false} />
              </Card>
            </Col>
            <Col md={{ span: 12 }} lg={{ span: 10 }} xl={{ span: 8 }} style={{maxWidth: '460px'}}>
              <Card title="首页预览">
                <div className={styles.onineshow} style={{height:'auto'}}>
                  <img src={indexTop} width="100%"/>
                  <img src={search} width="100%"/>
                </div>
                <div className={styles.onineshow}>
                  <Carousel autoplay>
                    { homepage.homebanner.map(item =>
                        <div>{item.image && <img src={item.image.file} style={{ width: '100%', height: '150px'}}/>}</div>
                    )}
                  </Carousel>
                  <Row style={{ margin:5 }}>
                    { homepage.shortcut.map(item =>
                      <Col span={6} style={{ textAlign:'center', margin: '5px 0' }}>
                        <Avatar size="large" src={item.image && item.image.file}/>
                        <div style={{marginTop: 3,fontSize: 12}}>{item.label}</div>
                      </Col>
                    )}
                  </Row>
                  { this.verifyModule('grouping') && <img src={groupbuy} width="100%"/> || null }
                  {/*{ this.verifyModule('periodic') && <img src={delivery} width="100%"/> || null}*/}
                  { this.verifyModule('recommendation') && <img src={recommend} width="100%"/> || null}
                  { this.verifyModule('credit') && <img src={integrate} width="100%"/> || null}
                </div>
                <div className={styles.onineshow} style={{height:'auto'}}>
                  <img src={bottom} width="100%"/>
                </div>
              </Card>
            </Col>
          </Row>
          <Modal width="60%" title="素材选择"
                 visible={_visible}
                 mask={false}
                 zIndex={1003}
                 centered
                 onCancel={() => this.setState({ _visible:false })}
                 onOk={() => this.handleSelect()}
                 bodyStyle={{maxHeight: `${wh-300}px`, overflowY: 'auto'}}>
            <SourceImageTab
              limit={1}
              visible={_visible}
              onSelectItem={(list) => this.setState({ _selectList: list })}
              {...this.props}/>
          </Modal>
        </Spin>
      </PageHeaderWrapper>
    );
  }

render() {
    const theme = this.props.theme;
    const { ticker, currentMarket, exchange } = this.props;

    // Find base price
    const { prices } = this.props.cmcPrice;
    let price = "-";
    let priceUnit = this.props.cmcPrice.legal;
    let priceLabel = <I s="Last Price" />;
    let priceLabelValue = `${ticker.close} ${currentMarket.quoteTokenSymbol}`;

    const marketConfig = config.getMarketByPair(
      currentMarket.current,
      exchange.markets
    ) || {
      precisionForPrice: 6,
    };

    // If it fails to get price, use default value.
    try {
      const result = prices.filter(
        (x) => x.symbol === currentMarket.quoteTokenSymbol
      );
      if (result) {
        price = (result[0]["price"] * ticker.close).toFixed(
          marketConfig.precisionForPrice
        );
        if (!isNaN(price)) {
          priceLabelValue = `${ticker.close} ${currentMarket.quoteTokenSymbol} (${price} ${priceUnit})`;
        }
      }
    } catch (error) {}

    return (
      <div
        style={{
          borderBottomStyle: "none",
        }}
      >
        <Menu
          selectedKeys={[]}
          mode="horizontal"
          theme="dark"
          style={{
            background: theme.secondaryNavbarBackground,
          }}
        >
          <Menu.Item
            key="current-market"
            style={{
              width: AppLayout.tradePanelWidth,
              height: "53px",
              background: theme.sidePanelBackground,
              paddingLeft: AppLayout.sidePadding,
              paddingRight: AppLayout.sidePadding,
            }}
          >
            <Popover
              overlayClassName="marketSelection"
              placement="bottomLeft"
              title={null}
              content={
                <MarketSelector
                  isVisible={this.state.modalVisible}
                  closePopover={() => {
                    this.setModalVisible(false);
                  }}
                />
              }
              trigger="click"
              visible={this.state.modalVisible}
              onVisibleChange={this.handleClickChange}
            >
              <SelectMarketButton
                block
                onClick={() => this.setModalVisible(true)}
              >
                <span
                  style={{
                    width: "94%",
                    textAlign: "left",
                  }}
                >
                  {currentMarket.current}
                </span>
                <TickerBarStatusIcon />
              </SelectMarketButton>
            </Popover>
          </Menu.Item>
          <MenuItem
            key="current-market-trade-price"
            selectable={false}
            style={{
              paddingLeft: "12px",
            }}
          >
            <RegularTextSpan>{priceLabel}</RegularTextSpan>
            <MenuHighlightTextSpan>{priceLabelValue}</MenuHighlightTextSpan>
          </MenuItem>
          <MenuItem key="current-market-trade-change" selectable={false}>
            <RegularTextSpan>
              <I s="24h Change" />
            </RegularTextSpan>
            <MenuHighlightTextSpan
              style={{
                color: ticker.percentChange24h.startsWith("-")
                  ? theme.downColor
                  : theme.upColor,
              }}
            >
              {ticker.percentChange24h}
            </MenuHighlightTextSpan>
          </MenuItem>
          <MenuItem key="current-market-trade-volume" selectable={false}>
            <RegularTextSpan>
              <I s="24h Volume" />
            </RegularTextSpan>
            <MenuHighlightTextSpan>
              {ticker.volume} {currentMarket.quoteTokenSymbol}
            </MenuHighlightTextSpan>
          </MenuItem>
          <MenuItem key="current-market-trade-high" selectable={false}>
            <RegularTextSpan>
              <I s="High" />
            </RegularTextSpan>
            <MenuHighlightTextSpan>
              {ticker.high} {currentMarket.quoteTokenSymbol}
            </MenuHighlightTextSpan>
          </MenuItem>

          <MenuItem key="current-market-trade-low">
            <RegularTextSpan>
              <I s="Low" />
            </RegularTextSpan>
            <MenuHighlightTextSpan>
              {ticker.low} {currentMarket.quoteTokenSymbol}
            </MenuHighlightTextSpan>
          </MenuItem>

          <Menu.Item
            key="market-available"
            style={{
              float: "right",
              paddingLeft: "0px",
              paddingRight: "24px",
              cursor: "default",
              display: "none",
            }}
          >
            <Carousel
              autoplay
              dots={false}
              speed={5000}
              style={{
                width: "225px",
                fontSize: "0.85rem",
                fontWeight: "600",

                userSelect: "none",
                height: AppLayout.tickerBarHeight,
              }}
            >
              <div>
                <div
                  style={{
                    float: "right",
                    height: AppLayout.tickerBarHeight,
                    lineHeight: AppLayout.tickerBarHeight,
                    color: theme.green,
                  }}
                >
                  <span style={{ color: theme.green }}>
                    <FontAwesomeIcon icon={faDotCircle} />{" "}
                    <I s="Market Available" />
                  </span>
                </div>
              </div>
            </Carousel>
          </Menu.Item>
        </Menu>
      </div>
    );
  }