Javascript 在reactJS中初始化swiper

我想在React应用程序中使用Swiper添加滑块。它没有正确地刷卡。 首先，我安装swiper与

npm安装Swiper

然后

从Swiper导入Swiper

在我的组件的componentDidMount方法中写了这个

var swiper=新的swiper（“.swiper容器”{
方向：'垂直'，
分页：{
el:“.swiper分页”，
可点击：正确，
},
});

我补充说：

幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
幻灯片7
幻灯片8
幻灯片9
幻灯片10

我在一个css文件中添加了require样式，我导入了它们，并导入了css和js文件

导入'swiper/css/swiper.min.css'
导入“swiper/js/swiper.min.js”

但结果是不正确的。它只显示slider1，没有任何样式，也不显示任何内容。多谢各位

---

我已在react应用程序中成功使用swiper，以下是安装npm后的步骤

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

而import'swiper/js/swiper.min.js'行是不必要的，所以请删除它

---

然后，您可以在您的

组件didmount

中初始化swiper实例。

这是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;

import React，{Component}来自“React”；
从“Swiper”导入Swiper；
//CSS
//swiper css必须放在第一位
导入“swiper/css/swiper.min.css”；
//您的自定义css必须排在第二位才能覆盖swiper.css中的某些样式
导入“/CoverFlowCarousel.css”；
类CoverFlowCarousel扩展组件{
componentDidMount（）{
this.swiper=新的swiper（“.swiper容器”{
grabCursor:true，//幻灯片上的小手光标
loop:true，//允许幻灯片从最后一张幻灯片循环到第一张幻灯片
//朝那个方向
centeredSlides:true，//有助于使幻灯片居中
SlideService视图：2，//允许您正在查看的幻灯片居中
//之前的幻灯片和之后的幻灯片都要挂在页面上
//从它的左边和右边
视差：true，//帮助用户将注意力集中到前面/中间的幻灯片上
效果：“覆盖流”，
覆盖流效应：{
旋转：50，//滑动以度为单位旋转
拉伸：0，//拉伸幻灯片之间的空间（以像素为单位）
深度：100，//以像素为单位的深度偏移（幻灯片在Z轴上平移）
修改器：1，//效果倍增器
slideShadows:true，//启用幻灯片阴影
},
分页：{
el:“.swiper分页”//幻灯片下方的小点用于导航
clickable:true，//允许您单击小点
},
导航：{
nextEl:“.swiper button next”//幻灯片侧面的箭头
prevEl:“.swiper button prev”//幻灯片侧面的箭头
},
});
}
render（）{
返回(
盖流幻灯片1
盖流幻灯片2
盖流幻灯片3
盖流幻灯片4
);
}
}
导出默认CoverFlowCarousel；

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

更确切地说，如果存储幻灯片数据的state对象是swiper init，则必须调用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>
  )
}

状态={
Swiperdata:[]
}
componentDidMount（）{
获取（`/carouseldata`）
。然后（res=>{
this.setState（{Swiperdata:res.data}）
})
}
componentDidUpdate（prevProps、prevState）{
if（prevState.Swiperdata！==this.state.Swiperdata）{
var swiper=新的swiper（“.swiper容器”{
方向：'水平'，
分页：{
el:“.swiper分页”，
可点击：正确，
},
自动播放：{
延误：5000，
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
幻灯片视图：1，
幻灯片栏：1，
循环：对，
反向：对，
stopOnLastSlide:false，
循环附加幻灯片：1000张，
这是真的，
updateOnImagesReady:对，
效果：“褪色”
})
}
render（）{
返回(
{this.state.Swiperdata.map（（项，i）=>
)}
)
}