1

Been researching for days, the arrows aren't showing on react-carousel the picture looks like this: Image Of No arrows

  • Im using Next .js It is my first time I havent had this problem with regular react apps

    import './carousel.scss'
import Carousel from 'react-multi-carousel';
import { ProductContext } from '../../pages/oniContext';
import { CardComp } from '../cards/card';
import {Button} from '../../components/common/button';
import {customArrows} from './customArrows'
import 'react-multi-carousel/lib/styles.css';

import React, {useState,useEffect,useContext} from 'react'

const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 1,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

export const PackageCarousel = (props) => {
  const productConsumer = useContext(ProductContext);

return (
  <Carousel
    swipeable={true}
    responsive={responsive}

  >
    {productConsumer.activePackage.map((service, index) => (
      <CardComp
        key={index}
        title={service.title}
        text={service.content}
        addOns={service.addOns}
        image={service.src}

      />
    ))}
  </Carousel>
);

    }

3 Answers3

1

Just add the below line in your head section of the webpage:

<link href="//db.onlinewebfonts.com/c/0e979bd4a3c1c6ac788ed57ac569667f?family=revicons" rel="stylesheet" type="text/css"/>

I was facing same issue and after adding above line 'revicons' font loads properly.

Vaibhav Gidde
  • 740
  • 7
  • 13
0

Digging through the source code here => https://github.com/YIZHUANG/react-multi-carousel/blob/master/src/assets/styles.css

It appears the arrow icons are coming from custom font files that are in eot woff formats.

This type of an outcome (boxes instead of icons ) is an indication the font is not properly downloaded and doesn't have the right mime type probably. See what the browser is downloading for revicons ( the font being used by the library) - If its incorrect or not downloaded, you may see the issue.

You have 3 options if you can confirm the fonts are indeed the issue

1.You may need to specify a loader https://www.npmjs.com/package/next-fonts to rectify the issue and get the fonts in.

  1. You maybe able to also load the font in the head and let the reference work out itself.

  2. You can modify the module to reference the fonts or inline them

If you can post your code in a online sandbox, I can assist more!

Best of luck!

Ramakay
  • 2,919
  • 1
  • 5
  • 21
0

I had a similar issue It simply was a CSS rule overwriting the 'react-multi-carousel' CSS Because the arrows are buttons

.layout-second-container button {
  // your CSS rules
}
DylanP97
  • 1
  • 1