已经在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. MYSQL数据库性能调优之二:定位慢查询

    windows下开启慢查询: 第一步:先查看版本 第二步查看查询日志和慢查询配置 第三步:配置开启慢查询 在my.ini配置文件的[mysqld]选项下增加: slow_query_log=TRUE ...

  2. INPUT输入框灰体提示

    INPUT输入框灰体提示 <input type="text" value='15 words limit' style="color:#999999" ...

  3. log file sync等待超高一例

    这是3月份某客户的情况,原因是server硬件故障后进行更换之后,业务翻译偶尔出现提交缓慢的情况.我们先来看下awr的情况. 我们能够看到,该系统的load profile信息事实上并不高,每秒才21 ...

  4. 201521123088《Java程序设计》第6周学习总结

    1. 本周学习总结 2. 书面作业 clone方法1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么?                 ...

  5. webapi 下载Ftp文件并返回流到浏览器完成文件下载

    ResultModel<HttpResponseMessage> resultModel = new ResultModel<HttpResponseMessage>(Resu ...

  6. golang Mysql -- Tx

    Transaction 事务 事务处理是数据的重要特性.尤其是对于一些支付系统,事务保证性对业务逻辑会有重要影响.golang的mysql驱动也封装好了事务相关的操作.我们已经学习了db的Query和 ...

  7. python用matplotlib画折线图

    折线图: import matplotlib.pyplot as plt y1=[10,13,5,40,30,60,70,12,55,25] x1=range(0,10) x2=range(0,10) ...

  8. bzoj1691/luogu2869 [USACO07DEC]挑剔的美食家 (STL::set)

    给牛和草都按价格排序,然后贪心地把草给牛(就是尽量给满足价格的.要求的美味度最高但不超过这个草的美味度的牛) 这个可以用一个平衡树来维护,偷懒直接用multiset了 #include<bits ...

  9. 怎样从外网访问内网WebLogic?

    本地安装了一个WebLogic,只能在局域网内访问,怎样从外网也能访问到本地的WebLogic呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WebLogic 默认安装的WebLogic端口是70 ...

  10. Nios内部RAM固化配置

    选择BSP Editor->Settings ->Advanced->hal->linker,然后勾选allow_code_at_reset.当然如果勾选enable_alt_ ...