Question

我想在我的React应用程序中使用Swiper来添加滑块。无法正确刷卡。起初我安装swiper '''

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，也不显示任何褶皱。请谢谢enter image description here

Answer 1

我已经在react应用程序中成功使用了swiper，这些是安装npm后的步骤，

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

，行import 'swiper/js/swiper.min.js'是不必要的，因此将其删除

然后，您就可以在componentDidMount中初始化扫描器实例了。

Answer 2

这是来自swiper的简单盖流滑块。将其粘贴到组件中并将其导入到您的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;

Answer 3

如果从服务器加载幻灯片的数据，我建议在componentDidUpdate内部初始化swiper。如果您从服务器中获取数据（通常在componentDidMount内部调用）并在那里也调用swiper init，则swiper无法正常工作。例如，就我而言，循环根本不起作用。我做了很多尝试，然后想到了这个主意。

更确切地说，如果存储幻灯片数据的状态对象必须调用swiper init。例如，内部类组件：

  state = {
    Swiperdata: []
  }

 componentDidMount() {
    axios.get(`/carouseldata`)
      .then(res => {
        this.setState({ Swiperdata: res.data })
      })
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.Swiperdata !== this.state.Swiperdata) {
      var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        autoplay: {
          delay: 5000,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        slidesPerView: 1,
        slidesPerColumn: 1,
        loop: true,
        reverseDirection: true,
        stopOnLastSlide: false,
        loopAdditionalSlides: 1000,
        preloadImages: true,
        updateOnImagesReady: true,
        effect: 'fade'
      })
  }

render() {
  return(
          <div class="swiper-container">
            <div class="swiper-wrapper">
              {this.state.Swiperdata.map((item, i) =>
                <div key={item.id} className='swiper-slide'>
                    <img src={`/images/${item.photo}`} />
                </div>
              )}
            </div>
            <div className="swiper-button-next"></div>
            <div className="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
          </div>
  )
}

在reactJS中初始化swiper

3 个答案: