Слова "PREV" и "NEXT" отображаются вместо навигационных стрелок в Swiper + React - PullRequest
Новая
       12

Слова "PREV" и "NEXT" отображаются вместо навигационных стрелок в Swiper + React

0 голосов
/ 08 октября 2019

Стрелки не отображаются. Вместо них на их месте отображается текст «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"

1 Ответ

0 голосов
/ 09 октября 2019

Размещение преобразования текста: верхний регистр;в стиле тега body будет выдавать эту ошибку. Например: 

body {
    text-transform: uppercase;
}
...