react.js 带箭头的 antd 轮播

问题描述 投票：0回答：10

我正在考虑使用 antd Caroseul，但我还没有看到创建上一个/下一个或暂停按钮的示例。 

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
10个回答
27
投票
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>
    );
  }
}
15
投票

首先：

arrow
是一个有效的Carousel属性，可以使用箭头手动控制内容。 antd 默认禁用。

您可以像这样启用它：

<Carousel arrows>
//
</Carousel>

但是您不会看到它们，因为 

.ant-carousel .slick-prev
和 
.ant-carousel .slick-prev
的样式是透明的。

style for antd carousel arrows default

此时您已经可以覆盖样式（例如

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

有一个带有 

::before
属性的 
content
选择器有点搞砸了样式（你不能从内联样式覆盖它）。 不过，您可以利用它并将箭头功能更改为：

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
选择器并包含图标。

在 LESS 文件中：

.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>
  )
}

最后，期望的输出：

6
投票

只需遵循此代码： 使用 useRef 钩子并将 Ref 分配给 Carousel，然后通过引用调用 next 和 prev 方法。

import React, { useRef, Fragment } from "react";
import { Carousel } from "antd";

const MyCarousel = () => {
const slider = useRef(null);

return ( 
<Fragment >
    <Button onClick={() => slider.current.next()}>next</Button>
    <Carousel ref={slider}>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </Carousel>
    <Button onClick={() => slider.current.next()}>next</Button>
</Fragment >
)}
5
投票

如果想添加箭头，可以使用Antd提供的箭头图标

<Carousel arrows nextArrow={<ArrowRightOutlined />} prevArrow={<ArrowLeftOutlined/>}>

由于 Antd css 隐藏了箭头，您可以使用以下代码在自己的 css 中覆盖它：

.ant-carousel .slick-prev,
.ant-carousel .slick-next {
  color: unset;
  font-size: unset;
}

.ant-carousel .slick-prev:hover,
.ant-carousel .slick-next:hover,
.ant-carousel .slick-prev:focus,
.ant-carousel .slick-next:focus {
  color: unset;
}
4
投票

在阅读时https://ant.design/components/carousel/我滚动到底部，它说它正在使用https://github.com/akiran/react-slick

如果向下滚动到 

prop
表，您可以使用 
nextArrow
或 
prevArrow
，它将 React 元素作为值。

1
投票

我正在使用React Hooks。我刚刚找到结果了。 这是示例：

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

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

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 8,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
}

<Carousel {...settings} arrows={true} draggable={true}>
    {koompiApps.map((res, index) => {
        return (
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
            <div
            onClick={(e) => {
                setAppsKey(`${index + 1}`)
            }}
            >
            <center>
                <motion.div
                whileHover={{
                    scale: 1.1,
                    transition: { duration: 0.3 },
                }}
                whileTap={{ scale: 0.9 }}
                >
                <img
                    src={`${res.logo}`}
                    className="koompiApps "
                    alt={res.name}
                />
                <h4 className="appsName">{res.name}</h4>
                </motion.div>
            </center>
            </div>
        </Col>
        )
    })}
</Carousel>

结果：

1
投票

将属性 

arrows
设置为 true，则应出现下一个和上一个箭头。但是你看不到它，因为 antd css 将其设置为透明，你可以通过将鼠标悬停在上面来感觉到它们。

要使它们可见，您可以安装 slick-carousel npm，并导入 css：

@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme";

然后设置箭头 css，如下所示：

.ant-carousel .slick-arrow::before {
  font-size: 24px;
  font-family: 'slick';
  color: #000;
}
1
投票

当我们将 

arrows
传递给 Carousel 时，它确实可以工作，但主要问题在于 CSS，因为 
font-size
和 
slick-prev
的默认 
slick-next
是 
0px
。

slick-prev::before
和
slick-next::before

也存在同样的问题

我可以推荐这个选项，它只会更改默认样式。 谢谢

 <Carousel autoplay arrows>
  <div>Test1</div>
  <div>Test2</div>
</Carousel>
.slick-arrow.slick-prev {
  font-size: 10px;
  
}
.ant-carousel .slick-prev::before {
    content: '<';
    display: block;
    position: relative;
    bottom: 20px;
    right: 3px;
    /* width: 100px; */
    font-size: 25px;
    color: gray;
    background-color: white;
    border: 2px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
    width: 33px;
    height: 33px;
   
}
.slick-arrow.slick-next {
  font-size: 10px;
}
.ant-carousel .slick-next::before {
  content: '>';
  display: block;
  position: relative;
  right: 3px;
  bottom: 20px;
  /* width: 100px; */
  font-size: 25px;
  color: gray;
  background-color: white;
  border: 2px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 50%;
  width: 33px;
  height: 33px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

0
投票

您可以将其替换为任何蚂蚁设计图标

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

//definition
const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => (
  <button
    {...props}
    className={
      "slick-prev slick-arrow" +
      (currentSlide === 0 ? " slick-disabled" : "")
    }
    aria-hidden="true"
    aria-disabled={currentSlide === 0 ? true : false}
    type="button"
  >
    <LeftOutlined />
  </button>
);
const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => (
  <button
    {...props}
    className={
      "slick-next slick-arrow" +
      (currentSlide === slideCount - 1 ? " slick-disabled" : "")
    }
    aria-hidden="true"
    aria-disabled={currentSlide === slideCount - 1 ? true : false}
    type="button"
  >
    <RightOutlined />
  </button>
);

//use 
<Carousel
{...settings}
prevArrow={<SlickArrowLeft />}
nextArrow={<SlickArrowRight />}
>
0
投票

改为这样做

import { Image } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Image.PreviewGroup>
    <Image width={200} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
    <Image
      width={200}
      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
    />
  </Image.PreviewGroup>
);

export default App;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.