React.js antd карусель со стрелками

Прежде всего: arrow - допустимое свойство Carousel, которое позволяет стрелкам вручную управлять содержимым. Он отключен по умолчанию программой antd.

Вы можете включить это так:

<Carousel arrows>
//
</Carousel>

Но вы их не увидите, потому что стиль для .ant-carousel .slick-prev и .ant-carousel .slick-prev прозрачный.

На этом этапе вы уже можете изменить стиль (пример display: block; background: red).

Другой вариант - управлять стилем изнутри опоры, используя свойства React Slick, поскольку antd использует это под капотом для компонента Карусель.

Это пример полного компонента:

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

Наконец, желаемый результат:

Если вы хотите добавить стрелки, вы можете использовать значки стрелок, предоставленные 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;
}

Во время чтения https://ant.design/components/carousel/ я прокрутил вниз, и он говорит, что использует https://github.com/akiran/react-slick

Если вы прокрутите вниз до таблицы prop, вы можете использовать nextArrow или prevArrow, которые принимают в качестве значения элемент React.

просто следуйте этому коду: используйте ловушку 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 >
)}

Я использую 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>

Результат:

Когда мы передаем arrows в Карусель, это действительно работает, но основная проблема связана с 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>

Установите prop arrows в значение true, и должны появиться стрелки следующего и предыдущего. Но вы не можете его увидеть, потому что antd css сделал его прозрачным, вы можете почувствовать его, наведя курсор мыши.

Чтобы сделать их видимыми, вы можете установить npm slick-carousel и импортировать 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;
}