已经在html文件中使用过,正确无误;但做成组件后(各种依赖文件引入路径确认无误)报错。

在只引入swiper.css时未报错,引入swiper.js文件后报错,如下:

错误原因,不详。

解决措施,不引入swiper.js,而是直接npm install swiper,在文件头部导入,如⬇️:

import React, { Component } from 'react';
import logo from './logo.svg';
import '../src/css/reset.css';
import '../src/css/swiper.css';
import '../src/css/slider.css';
import Swiper from 'swiper'; class Slider extends Component {
constructor(){
super();
this.state = {
};
}
componentDidMount(){
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
}
render(){
return <div className="swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide">Slide 1</div>
<div className="swiper-slide">Slide 2</div>
<div className="swiper-slide">Slide 3</div>
<div className="swiper-slide">Slide 4</div>
</div>
<div className="swiper-pagination"></div>
<div className="swiper-button-next"></div>
<div className="swiper-button-prev"></div>
</div>
}
} class App extends Component {
render(){
return <div>
<Slider></Slider>
</div>
}
} export default App;

这时又出现了新问题,写在html 文件中预览时还能自动轮播的图片,拆成组件后只能手划动轮播。。。待解

react-踩坑记录——swiper报错!的更多相关文章

  1. react踩坑记录——使用fetch获取json数据报错

    报错: 原因其实是list.json文件路径错误,该文件路径是相对于index.html的,而不是App.js或者index.js.

  2. React 踩坑记录

    1.React-router error: super expression must either be null or a function 原因:引入babel后写ES6风格的代码: class ...

  3. 踩坑之VC报错 error RC2104 : undefined keyword or key name

    .RC文件中第541行 MENUITEM "CNDev,                       ID_CNDEV 少了一个"    正确的应该是MENUITEM " ...

  4. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  5. google nmt 实验踩坑记录

       最近因为要做一个title压缩的任务,所以调研了一些text summary的方法.    text summary 一般分为抽取式和生成式两种.前者一般是从原始的文本中抽取出重要的word o ...

  6. 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负责的模块connector就派上了用场. ...

  7. 使用Windows下的git工具往github上传代码 踩坑记录

    使用Windows下的git工具往github上传代码 踩坑记录 背景 由于以前接触的项目都是通过svn进行版本控制,现在公司项目使用git,加上自己平时有一个练手小项目,趁着周末试着把项目上传到自己 ...

  8. Unity AssetBundle 踩坑记录

    Unity AssetBundle 踩坑记录 editor 下选择什么平台的 ab 加载 Material doesn't have a color property '_Color' UnityEd ...

  9. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

随机推荐

  1. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  2. unity, surface shader access world position and localposition

    一,surface shader中访问worldposition 在surface shader中访问世界坐标,只需在Input结构体中声明float3 worldPos即可,如下:  struct  ...

  3. Oracle内存管理理论篇二

    目标 了解oracle内存管理方式 掌握ASMM管理方式 掌握AMM管理方式 监控内存使用 学习一个知识点时,最好先了解其历史.ORACLE近期的版本都对内存管理做了简化,从9i通过PGA_AGGRE ...

  4. Graphviz-Gdot语言学习

    GVEdit这个绘图软件呢我也是刚接触的,感觉画起图来还是很爽的...尤其很熟悉c++后很容易上手这门dot语言. 先看一下十分清新的编程界面: 没有天下最邪恶的语法加亮,没有缩进行...这又算什么! ...

  5. CSS flex让所有灵活的项目都带有相同的长度,忽略它们的内容:

    .flexbox {     display: -webkit-box;     display: -webkit-flex;     display: -ms-flexbox;     displa ...

  6. mysql 初始化

    一.centos7下mysql 安装配置 yum -y install mariadb* systemctl start mariadb.service systemctl enable mariad ...

  7. 项目管理实践 -- 健身小管家(Fitness housekeeper)的管理

      最近在网上看到一篇文章<王石:我每天都强迫自己做的一件事>,[http://blog.sina.com.cn/s/blog_4dfc1c330102v0d0.html] 原始链接不详. ...

  8. [2014-02-19]ConfigurationSection:让web.config配置更有条理

    本文针对新手 使用Web.config的配置信息,一般都习惯于使用 ConfigurationManager.AppSettings["ConfigKey"] 当程序不断迭代,开发 ...

  9. Redis实战(十)Redis常见问题及解决方案

    序言

  10. python tesserocr ImportError: dll loading failed 一个不常遇见的错误,以及简单的python安装方法~

    废话不多说了,这是写给小白的了. 本人有c#,c/c++开发经验,最近因为偶然的原因,开始接触python,遇到一个棘手的问题,一位朋友在安装tesserocr 包后遇到一个错误,重新安装数次不能解决 ...