other-services.jsx

import React, { Component } from 'react';
import './OtherServicesCarousel.scss';
import Slider from "react-slick";
import apiUrl from '../../api_url';

import leftArrow from './arrow.svg'
import gradient from './gradient.svg';


function NextArrow(props) {
	const { onClick } = props;
	return (
	  <img src={leftArrow} onClick={ onClick } className="carousel-arrow next-arrow" alt=""/>
	);
}

function PrevArrow(props) {
	const { onClick } = props;
	return (
	  <img src={leftArrow} onClick={ onClick } className="carousel-arrow prev-arrow" alt=""/>
	);
}

class OtherServicesCarousel extends Component {
  render() {
    let settings = {
			dots: true,
			dotsClass: 'carousel-dots',
			appendDots: dots => <div>{dots}</div>,
			infinite: true,
			speed: 500,
			slidesToShow: 3,
			slidesToScroll: 3,
			prevArrow: <PrevArrow />,
      nextArrow: <NextArrow />,
      responsive: [
        {
          breakpoint: 1025,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            centerPadding: '20px',
          }
        }
      ]
		};
    const {content, language} = this.props
    return (
      <div className="other-services-carousel">
        { content ?
        <Slider {...settings}>
            {content.map((card) => {
              return(
              <div class="services-carousel-card">
      					<img className="carousel-services-image" src={apiUrl + card.imagem.url} alt=""/>
                <img className="carousel-gradient" src={gradient} alt=""/>
                <p className="carousel-services-text">{card[`titulo_${language}`]}</p>
                <div className="other-services-carousel-card-line"></div>
              </div>
              )
              }
            )}
          </Slider>
          :
          ''
        }
      </div>
    );
  }
}

export default OtherServicesCarousel;