Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'));
like image 462
The Old County Avatar asked May 22 '17 13:05

The Old County


5 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>
    );
  }
}
like image 118
Prakhar Mittal Avatar answered Oct 16 '22 14:10

Prakhar Mittal


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

like image 12
Nicolas Hevia Avatar answered Oct 16 '22 15:10

Nicolas Hevia


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 >
)}
like image 5
Mohamad amin Moslemi Avatar answered Oct 16 '22 14:10

Mohamad amin Moslemi


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.

like image 4
Dan Avatar answered Oct 16 '22 16:10

Dan


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

like image 4
DLee Avatar answered Oct 16 '22 15:10

DLee