'react.js antd carousel with arrows

I am looking at using the antd Caroseul, but I've not seen an example that creates a prev/next or pause button.

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'));

Solution 1:^[1]

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

Solution 2:^[2]

First of all: arrow is a valid Carousel property that enables the arrows to manually control the content. It is disabled by default by antd.

You can enable it like this:

<Carousel arrows>
//
</Carousel>

But you won't see them because the style for .ant-carousel .slick-prev and .ant-carousel .slick-prev is transparent.

style for antd carousel arrows default

At this point you already can override the style (example display: block; background: red).

Another option is to control the style from inside the prop, using React Slick properties, since antd is using it under the hood for the Carousel component.

This is a full component example:

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

There is a ::before selector with content property that kinda screws up the style (you can't override it from inline style). You could take advantage of it though and change the arrow functions to:

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

You can override the default antd style to remove the ::before selector and include icons.

In a LESS file:

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

And in your component (implying that you're using the component provided in the example above):

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

Finally, the desired output:

Solution 3:^[3]

Whilst reading https://ant.design/components/carousel/ I scrolled to the bottom and it says that it's using https://github.com/akiran/react-slick

If you scroll down to the prop table, you can use nextArrow or prevArrow which takes a React Element as a value.

Solution 4:^[4]

just follow this code : use useRef hook and assign a Ref to Carousel and then call next and prev method by refrence.

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

Solution 5:^[5]

If you want to add arrows, you can use the arrow icons provided by Antd

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

Since the arrows are hidden by Antd css, you can override it in your own css with the following:

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

Solution 6:^[6]

I'm using the React Hooks. I just found the result. Here is example:

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>

The Result:

Solution 7:^[7]

Set prop arrows be true, and the next and prev arrow should appear. But you cannot see it because antd css set it to be transparent, you can feel them by hovering the mouse on.

To make them visible, you can install slick-carousel npm, and import the css:

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

then set the arrow css like:

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

Solution 8:^[8]

When we pass arrows to Carousel, it actually works, but the main problem is with CSS, because the default font-size of slick-prev and slick-next is 0px.

The same problem exists with slick-prev::before and slick-next::before

I can recommend this option, which will simply change the default style's. Thanks

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

Solution 9:^[9]

you can replace it with any ant design icon

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Prakhar Mittal
Solution 2
Solution 3	Dan
Solution 4	Mohamad amin Moslemi
Solution 5
Solution 6	×¡×˜× ×œ×™ ×’×¨×•× ×Ÿ
Solution 7	Jimmy Huang
Solution 8
Solution 9	zmyyyyy

'react.js antd carousel with arrows

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]