react.js antd carousel with arrows

user_2700673 0
Viewed 31554

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'));
carousel antd reactjs
9 Answers
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>
    );
  }
}
user_94781450

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

arrows example

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

enter image description here

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:

enter image description here

user_64029900

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

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

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:

enter image description here

user_99706260

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

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>

enter image description here

user_129737530

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