文章/答案/技术大牛

发布

社区首页 >问答首页 >swiper集成

问swiper集成
EN

Stack Overflow用户

提问于 2016-02-11 17:35:11

回答 2查看 1K关注 0票数 0

我正在尝试将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‘是未定义的。

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

javascript

css

image

slider

swiper

回答 2

Stack Overflow用户

发布于 2016-02-11 18:25:38

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

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

票数 0

Stack Overflow用户

发布于 2022-02-05 21:09:03

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

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]);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35335474

复制

相似问题

问swiper集成
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问swiper集成EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问swiper集成
EN