Проблема установки Swiper в моем проекте React - PullRequest
Новая
       46

Проблема установки Swiper в моем проекте React

0 голосов
/ 01 мая 2020

Я пытаюсь добавить Swiper в свое React Web App, у меня проблемы с обычным плагином, поэтому я решил вместо этого использовать этот фреймворк: swiper-реаги * Специально разработано для React.

После учебника по началу работы: 

Stylesheet

/*react-id-swiper requires Swiper's stylesheet. You can use CDN or use provided stylesheet files (css or scss) from react-id-swiper/lib/styles*/

Provided stylesheet files
// scss
import 'react-id-swiper/lib/styles/scss/swiper.scss';
// css
import 'react-id-swiper/lib/styles/css/swiper.css';

В нем говорится, что мне нужно импортировать эти CSS файлы, но когда я пытаюсь импортировать их в свой компонент, в время выполнения я получаю: 

./src/component/component/HorizontalEventList.jsx
Module not found: Can't resolve 'react-id-swiper/lib/styles/css/swiper.css' in '/Users/giulioserra/Documents/Siti Web/Hangover/hangover/src/component/component'

без них результат на странице следующий:

SCREENSHOT

Вот код страницы: 

     import React, { Component } from "react";
    import { Link } from "react-router-dom";
    import global from "../../resource/global.json";

        import System from "../../System/System";
        import Spinner from "../component/Spinner";

        import EventMini from "../card/EventMini";

        import Swiper from 'react-id-swiper';

export default class HorizontalEventList extends Component {
  constructor() {
    super();
    this.state = {
      dataFetched: false,
      emptyMessage: "Nulla da visualizzare.",
    };
  }

  componentDidMount() {
    //here we check if there is a callback to fetch data from
    try {
      if (this.state.dataFetched) return;

      if (this.props.datasource !== undefined) {
        this.setState({ datasource: this.props.datasource, dataFetched: true });
        return;
      }

      if (this.props.dataCallback !== undefined && !this.state.dataFetched) {
        this.props.dataCallback().then((events) => {
          this.setState({ datasource: events, dataFetched: true });
        });
      }
    } catch (err) {
      console.log({ error: err });
      this.setState({ datasource: {}, dataFetched: true });
    }
  }

  /**
   * Generate a list to display the events
   * @author Giulio Serra <giulio.serra1995@gmail.com>
   */
  generateEvenList() {
    let elements = [];

    for (const eventID in this.props.datasource) {
      const event = this.props.datasource[eventID];
      elements.push(
        <li
          key={eventID}
          style={{
            marginLeft: "30px",
            marginRight: "30px",
            marginBottom: "30px",
          }}
        >
          <EventMini event={{ [eventID]: event }} />
        </li>
      );
    }

    return (
      <div>
        <ul
          className="list-group list-group-horizontal"
          style={{ listStyle: "none", overflowX: "auto" }}
        >
          {elements}
        </ul>
      </div>
    );
  }

  render() {

    const params = {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    }

    return (
      <Swiper {...params}>
        <div>Slide #1</div>
        <div>Slide #2</div>
        <div>Slide #3</div>
        <div>Slide #4</div>
        <div>Slide #5</div>
      </Swiper>
    )
}

Что я делаю не так? Спасибо.

1 Ответ

0 голосов
/ 01 мая 2020

В разделе Styling указано readme .

Для версии <= 2.3.2 </strong>

Вы можете импортировать напрямую из react-id-swiper/lib/styles/ (с поддержкой css, с css)

css

import 'react-id-swiper/lib/styles/css/swiper.css'

с css

import 'react-id-swiper/lib/styles/scss/swiper.scss'

Для версии> = 3.0.0

Вы должны импортировать напрямую из Swiper пакетов, которые поддерживают css, s css и менее

css

import 'swiper/css/swiper.css'

с css

import 'swiper/swiper.scss'

less 

import 'swiper/swiper.less'

Вы должны попробовать импортировать для v3.0.0, потому что это текущая версия на npm.

...