swiper的集成答案

【问题标题】：Integration of swiperswiper的集成
【发布时间】：2016-02-11 09:35:10
【问题描述】：

我正在尝试将 swiper 与我的网站集成。不过，我对编程很陌生。我已将 CSS 和 HTML 添加到我的代码中，但我不确定如何初始化 swiper。

我有一个名为 swiper-common.js 的项目，其中包含以下代码：

 var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 3000,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationBulletRender: function (index, className) {
                return '<span class="' + className + '"></span>';
            }
        });

我想我需要调用它或将其插入到我正在显示我的 swiper 的主页中。我尝试添加

<script>
 var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 3000,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationBulletRender: function (index, className) {
                return '<span class="' + className + '"></span>';
            }
        });
</script>

但我收到以下错误： JavaScript 运行时错误：“Swiper”未定义。

代码中的所有其他内容都有效，即显示的样式和图像虽然下一个和上一个按钮不起作用，自动播放也不起作用

【问题讨论】：

无论何时你说new Swiper，它都会尝试创建一个新的Swiper函数实例。所以你需要有一个 Swiper 函数，这就是你得到运行时错误的原因
我想我有这个功能。它包含在一个名为 swiper.jquery.umd.js 的 javascript 文件中，并以 var Swiper = function (container, params) { if (!(this instanceof Swiper)) return new Swiper(container, params);等等等等。
我想我只是不确定通信故障在哪里..
你使用现有的库吗？

标签： javascript css image slider swiper

【解决方案1】：

我认为你应该检查你的环境。一个简单的项目如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swiper demo</title> 
<link rel="stylesheet" href="swiper.min.css">

</head>
<body>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>     
    <div class="swiper-pagination"></div>     
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<script src="swiper.min.js"></script> <!-- Important: This should be first when running below script-->

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
    });
    </script>
</body>
</html>

请记住，在运行 new Swiper 的脚本之前，您需要包含 swiper.min.js

【讨论】：

【解决方案2】：

首先你应该注册必要的组件

import Swiper, { Navigation, Pagination } from 'swiper';
  // import Swiper and modules styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

  // init Swiper:
  const swiper = new Swiper('.swiper', {
    // configure Swiper to use modules
    modules: [Navigation, Pagination],
    ...
  });

或者

 Swiper.use([Pagination, History]);

【讨论】：