web-dev-qa-db-ja.com

reactJSでスワイパーを初期化する

私はReactアプリケーションでスライダーを追加するためにスワイパーを使用したい。それは正しくスワイプしていません。最初に

npm install Swiper

その後

import Swiper from swiper

これを私のコンポーネントのcomponentDidMountメソッドに書いた

     var swiper = new Swiper('.swiper-container', {
          direction: 'vertical',
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });

追加した：

    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

そして、私はそれらをインポートするCSSファイルに必要なスタイルを追加し、CSSとJSファイルをインポートします

    import 'swiper/css/swiper.min.css'
    import 'swiper/js/swiper.min.js'

しかし、結果は正しくありません。スタイルなしでSlider1のみを表示し、何も表示しません。ありがとうございました。

スライダー画像

javascriptreactjsswiper
2
bahar

私は反応アプリでスワイパーを正常に使用しました、そしてこれらはnpmインストール後のステップです、

import Swiper from "swiper"; 
import "swiper/css/swiper.css";

と行import 'swiper/js/swiper.min.js'は不要なので削除してください

次に、すでに行ったように、componentDidMountのスワイパーインスタンスを初期化できます。

1
jidexl21

これはスワイパーのシンプルなカバーフロースライダーです。コンポーネントに貼り付けて、App.jsにインポートします

import React, { Component } from "react";
import Swiper from "swiper";
// CSS
//swiper css must come first
import "swiper/css/swiper.min.css";
// your custom css must come second to overwrite certain stylings in swiper.css
import "./CoverFlowCarousel.css";

class CoverFlowCarousel extends Component {
  componentDidMount() {
    this.swiper = new Swiper(".swiper-container", {
      grabCursor: true, // little hand cursor over slides
      loop: true, // allows the slides to loop from the last slide back to the first 
      // in that direction
      centeredSlides: true, // helps to center the slides
      slidesPerView: 2, // allows the slide you're looking at to be the centered slide 
      // with the slide before and the slide after to be hanging just off the page 
      // from the left and right of it
      parallax: true, // Helps focus the users attention to the slide in front/center
      effect: "coverflow",
      coverflowEffect: {
        rotate: 50, // Slide rotate in degrees
        stretch: 0, // Stretch space between slides (in px)
        depth: 100, // Depth offset in px (slides translate in Z axis)
        modifier: 1, // Effect multipler
        slideShadows: true, // Enables slides shadows
      },
      pagination: {
        el: ".swiper-pagination", // little dots under the slides for navigation
        clickable: true, // allows you to click on the little dots
      },
      navigation: {
        nextEl: ".swiper-button-next", // arrows on the side of the slides
        prevEl: ".swiper-button-prev", // arrows on the side of the slides
      },
    });
   }
  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">Cover Flow Slide 1</div>
          <div className="swiper-slide">Cover Flow Slide 2</div>
          <div className="swiper-slide">Cover Flow Slide 3</div>
          <div className="swiper-slide">Cover Flow Slide 4</div>
        </div>
        <div className="swiper-pagination" />
        <div className="swiper-button-prev" />
        <div className="swiper-button-next" />
      </div>
    );
  }
}

export default CoverFlowCarousel;
0
Jesse McKinney