javascript - 一页上有两个滑动 slider-6ren

javascript - 一页上有两个滑动 slider

转载作者：行者123 更新时间：2023-12-03 03:31:35

24

4

我正在使用swiper slider在我的页面上。

现在我想添加另一个。我被复制了第一个 slider 并更改了他的类，就像我对 js 初始化所做的一样。两个 slider 都工作，但在第二个 slider 中看起来配置参数被忽略...我有 1 个可见幻灯片而不是 10 个，spaceBetween 参数没有更改任何内容，我设置了 1 或 500 没有...

我做错了什么？

HTML:

<div class="swiper-container slider1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            slide 1  
        </div>
        <div class="swiper-slide">
            slide 2  
        </div>
        ...
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<div class="swiper-container slider2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            slide 1  
        </div>
        <div class="swiper-slide">
            slide 2  
        </div>
        ...
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

JS:

var swiper = new Swiper('.slider1', {
    slidesPerView: 3,
    paginationClickable: true,
    lazyLoading: true,
    spaceBetween: 10,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

var newSwiper = new Swiper('.slider2', {
    slidesPerView: 10,
    paginationClickable: true,
    lazyLoading: true,
    spaceBetween: 10,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

编辑:

所以问题是 - html swiper slider 位于 bootstrap 类 tab-pane 中，它是 bootstrap tabs所以它是隐藏的，点击选项卡后它就会显示出来。

第二个 slider 的原始js:

var newSwiper = new Swiper('.slider2', {
    slidesPerView: 10,
    paginationClickable: true,
    lazyLoading: true,
    spaceBetween: 10,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

和解决方案:

$(".locality-tab").on("click",function(){ 
    setTimeout(function () {
        newSwiper.update();
    }, 400);
});

.locality-tab 是切换内容的按钮类。

最佳答案

您的代码工作正常，检查下面的代码片段。

如果您有 1 张可见幻灯片，则 spaceBetween 配置没有任何意义。

如果您想使用 spaceBetween 配置，则需要将 slidesPerView 值设置为至少 2。

spaceBetween: Distance between slides in px.

slidesPerView: Number of slides per view (slides visible at the same time on slider's container).

var swiper = new Swiper('.slider1', {
    slidesPerView: 2,
    spaceBetween: 20, //it is only effective when slidesPerView >=2
    paginationClickable: true,
    lazyLoading: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

var newSwiper = new Swiper('.slider2', {
    slidesPerView: 3,
    paginationClickable: true,
    spaceBetween: 5,
    lazyLoading: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <style>
      .swiper-slide{
        color:white;
        padding:10px;
      }

    </style>
  </head>
  <body>
    <div class="swiper-container slider1 row">
        <div class="swiper-wrapper col-md-12">
            <div class="swiper-slide col-md-4 text-center" style="background-color:blue;">
                slide 1  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:black;">
                slide 2  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:yellow;">
                slide 3  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:red;">
                slide 4  
            </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <br>
    <br>
    <div class="swiper-container slider2 row">
        <div class="swiper-wrapper col-md-12">
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:red;">
                slide 1  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:yellow;">
                slide 2  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:blue;">
                slide 3  
            </div>
            <div class="swiper-slide col-md-4 text-center"
            style="background-color:green;">
                slide 4  
            </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
  </body>
</html>

更多配置请访问Swiper Parameters

关于javascript - 一页上有两个滑动 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46072100/

24

4

0

文章推荐： javascript - 设置具有只读属性的输入字段的默认值

文章推荐： javascript - React中ajax后计数

文章推荐： javascript - 在 ReactJS 中实现 javascript/json 对象

文章推荐： javascript - 为 keystonejs 中的局部变量赋值

android - 即使应用程序关闭(滑动/滑动)也会收到 GCM 通知
这是在我的 MainActivity 中用作 BroadcastReceiver 的代码 mRegistrationBroadcastReceiver = new BroadcastRecei
JQuery - 滑动
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
iphone - 滑动 UISearchBar
我想在大部分时间隐藏 UISearchBar，只在用户需要时调用它来显示。我在 Interface Builder 中放置了一个 UISearchBar 并将其隐藏在 View 后面，当用户单击按钮
cocoa - 滑动 CCMenu
我有一个包含 CCMenuItemImage 的菜单(“myMenu”)。我希望此菜单能够检测手指滑动并相应地滑动。我的问题是 CCMenuItemImage 似乎吸收了触摸事件。当用户触摸 CCM
javascript - 滑动/跟随导航菜单
我正在寻找一个简单的 jQuery 或 Javascript 解决方案，以使导航侧边栏在用户向下滚动页面时顺利跟随用户。像这里一样:http://ucon-acrobatics.com/shop/ 任
ListView 滑动/滑动动画
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
java Tokenizer 滑动
我想将 String 行标记化为标记(存储到 String 表中)，并且我只能使用 java.io.*它是为了实现一个计算器。例如:第一行:1+2+3第二行:1+ 2*3(标记之间有空格) 进入表{
ListView 滑动/滑动动画
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
jquery - 在两个导航栏中切换/滑动
我有一个导航栏，当单击菜单图标时，它将滑入“#secondary-nav”并隐藏“#primary-nav”。然而 jquery 似乎没有显示“#secondary-menu”。下面提供的是 HTMl
iOS 滑动 UITableView
这个问题已经有答案了: how to make a sliding up panel like the Google Maps app? (2 个回答) 已关闭 7 年前。我正在寻找类似的实现，如下
android - ViewPager 滑动
我有 ViewPager(Slide) 和 3 张图片。共有三个图像是通过 Internet 下载的。如果我将图片换到服务器上的另一台服务器上，链接保持不变，但应用程序中的图片没有改变，仍然是缓存中的
android - 在不抬起手指的情况下检测触摸的项目改变(滑动)
我在 gridview 中创建了两个按钮。我想达到以下目的，但不知道应该用什么方法？首先我触摸第一个按钮，将显示 toast 1 msg。通过将我的手指滑到第二个按钮而不抬起我的手指，将显示 to
jquery 滑动/计时问题
所以我设置了一个小的 jquery 动画，用户将鼠标悬停在容器上一段时间，这会导致容器 split ，然后显示内部信息。我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动
javascript - 如何将鼠标选择默认效果转换为在网站中滚动/滑动？
这个问题在这里已经有了答案: Simulate swipe with mouse in javascript (5 个答案) 关闭 7 年前。
python - 滑动 Sprite
我希望我的 Sprite 像在冰上一样滑动。因此，如果他在地面上，那么他可以正常行走，但当他接触冰时，他会滑动，直到有东西阻止他。有谁知道如何才能做到这一点？谢谢最佳答案像“Sprite Move
JavaScript 滑动、文本消失和居中修复
我的代码有几个问题:HTML: Bellevue
Android - 滑动 fragment
我正在尝试实现从 fragment1 过渡到 fragment2 的滑动动画。我正在使用 setCustomAnimations 方法。而且我知道我需要使用框架方法来替换 fragment 。我的代
Android 滑动 View ？
我不知道你们是否听说过 app chomp，但应用程序中有一个布局，如下图所示。我想知道他们是如何设置的，我将如何使用它来为我自己的应用程序制作类似的东西。有趣的是，当你滑动时，没有像水平 Scrol
ios - UICollectionView 滑动
我想检测用户何时在一个单元格占据整个屏幕宽度的 collectionView 中向左或向右滑动。是否可以不添加手势识别器。我试过添加手势识别器，但只有当我们将 collectionView 的 scr
mongodb - 滑动/匹配的后端如何在基于滑动的应用程序中工作？
我正在尝试开发一个应用程序来复制类似 tinder 的基于滑动的提要。该应用程序的想法与火种非常相似，也具有向右滑动和向左滑动匹配功能。到目前为止我做了什么-我在 MongoDB 中创建了一个刷卡集

首页

博学

6Ren·AI

商城

javascript - 一页上有两个滑动 slider

编辑: