问带箭头的react.js antd旋转木马
EN

Stack Overflow用户

提问于 2017-05-22 13:30:14

回答 8查看 23.3K关注 0票数 11

我正在考虑使用antd Caroseul，但我还没有看到创建prev/next或pause按钮的示例。

const { Carousel } = antd;

ReactDOM.render(
  <Carousel autoplay>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('app'));

reactjs

carousel

antd

TDSQL-CMySQL免费体验

云原生数据库TDSQL-C MySQL 2核4G 免费体验15天

回答 8

Stack Overflow用户

发布于 2019-01-25 11:12:25

import React, { Component } from "react";
import { Carousel, Icon } from "antd";

export default class CarouselComponent extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.carousel = React.createRef();
  }
  next() {
    this.carousel.next();
  }
  previous() {
    this.carousel.prev();
  }

  render() {
    const props = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <Icon type="left-circle" onClick={this.previous} />
        <Carousel ref={node => (this.carousel = node)} {...props}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
        </Carousel>
        <Icon type="right-circle" onClick={this.next} />
      </div>
    );
  }
}

票数 24

Stack Overflow用户

发布于 2020-09-11 02:09:10

首先：arrow是一个有效的Carousel属性，它允许箭头手动控制内容。它被antd定义为disabled by default。

您可以像这样启用它：

<Carousel arrows>
//
</Carousel>

但是你看不到它们，因为.ant-carousel .slick-prev和.ant-carousel .slick-prev的样式是透明的。

此时，您已经可以覆盖样式(例如display: block; background: red)。

另一种选择是使用React Slick属性从prop内部控制样式，因为antd在幕后将其用于Carousel组件。

这是一个完整的组件示例：

import React from 'react'
import { Row, Col, Carousel } from 'antd'

const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79'
}

// from https://react-slick.neostack.com/docs/example/custom-arrows
const SampleNextArrow = props => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{ ...style, display: 'block', background: 'red' }}
      onClick={onClick}
    />
  )
}

const SamplePrevArrow = props => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{ ...style, display: 'block', background: 'green' }}
      onClick={onClick}
    />
  )
}

const settings = {
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />
}

const CarouselArrows = () => {
  return (
    <>
      <Row justify="center">
        <Col span={16}>
          <Carousel arrows {...settings}>
            <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>
        </Col>
      </Row>
    </>
  )
}

export default CarouselArrows

有一个带有content属性的::before选择器在某种程度上破坏了样式(你不能从内联样式中覆盖它)。不过，您可以利用它并将箭头函数更改为：

const SampleNextArrow = props => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{ ...style, display: 'block', background: 'red' }}
      onClick={onClick}
    />
  )
}

const SamplePrevArrow = props => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{ ...style, display: 'block', background: 'green' }}
      onClick={onClick}
    />
  )
}

您可以覆盖默认的antd样式以删除::before选择器和包括图标。

在一个较小的文件中：

.ant-carousel {
  .slick-next {
    &::before {
      content: '';
    }
  }
  .slick-prev { 
    &::before {
      content: '';
    }
  }
}

在您的组件中(这意味着您正在使用上面示例中提供的组件)：

import { LeftOutlined, RightOutlined } from '@ant-design/icons'

// ...

const SampleNextArrow = props => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{
        ...style,
        color: 'black',
        fontSize: '15px',
        lineHeight: '1.5715'
      }}
      onClick={onClick}
    >
      <RightOutlined />
    </div>
  )
}

const SamplePrevArrow = props => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{
        ...style,
        color: 'black',
        fontSize: '15px',
        lineHeight: '1.5715'
      }}
      onClick={onClick}
    >
      <LeftOutlined />
    </div>
  )
}