0

研究了好几天，react-carousel 上没有显示箭头，图片如下所示： Image Of No arrows

  • 我正在使用 Next .js 这是我第一次在使用常规反应应用程序时没有遇到这个问题

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

    }

4

2 回答 2

0

在这里挖掘源代码 => https://github.com/YIZHUANG/react-multi-carousel/blob/master/src/assets/styles.css

似乎箭头图标来自eot woff格式的自定义字体文件。

这种类型的结果（框而不是图标）表明字体未正确下载并且可能没有正确的 mime 类型。查看浏览器正在下载什么revicons（库正在使用的字体） - 如果它不正确或未下载，您可能会看到问题。

如果您可以确认字体确实是问题，您有 3 个选项

1.您可能需要指定加载程序https://www.npmjs.com/package/next-fonts来纠正问题并获取字体。

  1. 您也许还可以在头部加载字体并让参考自行解决。

  2. 您可以修改模块以引用字体或内联它们

如果您可以将代码发布在在线沙箱中，我可以提供更多帮助！

祝你好运！

于 2020-06-22T12:59:39.913 回答
0

只需在网页的 head 部分添加以下行：

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

我遇到了同样的问题，并且在添加了上面的“revicons”字体后正确加载。

于 2021-02-09T12:34:18.097 回答