Question

箭头不显示。而是在其位置显示“ PREV”和“ NEXT”文本。

我已经确认swiper.css正在加载。 PREV和NEXT文本正常运行。单击它们可以更改图像，并且移动滑动手势功能也可以按预期进行。

编辑：codepen在这里：https://codepen.io/davrosfl/pen/OJJPegm 奇怪，它在Codepen中工作正常，但在我的本地计算机上却不行。相同的代码。

import Swiper from 'swiper';
import './Project2.css';
import 'swiper/css/swiper.css';

class Project2 extends Component {

    componentDidMount() {
        this.mySwiper = new Swiper('.swiper-container', {
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            observer: true,
            observeParents: true
        });
    }

    render() {
        return (
            <div className="swiper-container" ref={div => this.carouselRef = div}>
                <div className="swiper-wrapper">

                    <div className="swiper-slide">
                        <img src={`${process.env.PUBLIC_URL}/images/01.jpg`} />
                    </div>
                    <div className="swiper-slide">
                        <img src={`${process.env.PUBLIC_URL}/images/02.jpg`} />
                    </div>
                </div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
            </div>
        )
    }
}

export default Project2;

CSS

.swiper-container {
    height: calc( (var(--vh, 1vh) * 100) - 10.75vh );
    width: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

我希望显示导航箭头，而不是“ PREV”和“ NEXT”

Answer 1

放置文本转换：大写；在body标签样式中将产生此错误。例如：

body {
    text-transform: uppercase;
}

在Swiper + React中显示单词“ PREV”和“ NEXT”，而不显示导航箭头

1 个答案: