react.js antd carousel with arrows

Question

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         


        

Answer 1

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:

//

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

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 (Antd is using React Slick 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 (
    

  )
}

const SamplePrevArrow = props => {
  const { className, style, onClick } = props
  return (
    

  )
}

const settings = {
  nextArrow: ,
  prevArrow: 
}

const CarouselArrows = () => {
  return (
    <>
      
        
          
            

              
1
            
            

              
2
            
            

              
3
            
            

              
4
            
          
        
      
    
  )
}

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 (
    

  )
}

const SamplePrevArrow = props => {
  const { className, style, onClick } = props
  return (
    

  )
}

---

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 (
    

      
    
  )
}

const SamplePrevArrow = props => {
  const { className, style, onClick } = props
  return (
    

      
    
  )
}

Finally, the desired output: