集成刷卡器

Integration of swiper

本文关键字：刷卡器 集成      更新时间：2023-09-26

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

我有一个名为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>';
            }
        });

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

<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"未定义。

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

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

<!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

首先，您应该注册必要的组件

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​]​)​;
相关文章：