Javascript 一页上有两个滑动滑块

我正在我的页面上使用

现在我想再加一个。我被复制了第一个slider并改变了他的类，就像我对js初始化所做的一样。两个滑块都工作，但在第二个滑块中，配置参数似乎被忽略。。。我有一个可见的幻灯片不是10，spaceBetween参数没有改变任何东西我设置了1或500什么都没有

我做错了什么

HTML:

编辑： 所以问题是-html滑动条在引导类

选项卡窗格中，所以它是隐藏的，在单击选项卡后它显示出来

第二个滑块的原始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选项卡
是用于切换内容的按钮上的类。
您的代码工作正常，请检查代码段下面的内容

如果您有一张可见幻灯片，那么空格之间的配置就没有意义了

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

间距：像素中幻灯片之间的距离

SlideService视图：每个视图的幻灯片数（幻灯片在滑块容器上同时可见）


var swiper=新的swiper（'.slider1'{
幻灯片视图：2，
spaceBetween:20，//仅当SlideService>=2时有效
paginationClickable:true，
懒洋洋：没错，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”
});
var newSwiper=新开关（'.slider2'{
幻灯片视图：3，
paginationClickable:true，
间隔：5，
懒洋洋：没错，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”
});

.滑梯{
颜色：白色；
填充：10px；
}
幻灯片1
幻灯片2
幻灯片3
幻灯片4




幻灯片1
幻灯片2
幻灯片3
幻灯片4
您的代码运行良好，请检查下面的代码片段

如果您有一张可见幻灯片，那么空格之间的配置就没有意义了

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

间距：像素中幻灯片之间的距离

SlideService视图：每个视图的幻灯片数（幻灯片在滑块容器上同时可见）


var swiper=新的swiper（'.slider1'{
幻灯片视图：2，
spaceBetween:20，//仅当SlideService>=2时有效
paginationClickable:true，
懒洋洋：没错，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”
});
var newSwiper=新开关（'.slider2'{
幻灯片视图：3，
paginationClickable:true，
间隔：5，
懒洋洋：没错，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”
});

.滑梯{
颜色：白色；
填充：10px；
}
幻灯片1
幻灯片2
幻灯片3
幻灯片4




幻灯片1
幻灯片2
幻灯片3
幻灯片4
我想说的是，我在导航页面上也遇到了多个刷卡器的问题。（每个都有自己的额外类，如示例（但演示只有分页，没有导航箭头。）

所以我添加了.swiper1和.swiper2两个swiper容器，它只在分页处于活动状态时工作，但是如果同时添加导航2，则第二个swiper不会滑动

这里有一支钢笔

（我也向Nav添加了不同的类。当您单击箭头时，您可以看到DOM中发生了一些事情，但没有显示的视觉变化。）

所以，现在导航功能正常了。我还必须将.swiper容器添加到每个新的swiper中。
只是说，我在导航页面上也遇到了多个swiper的问题。（每个swiper都有自己的额外类，如示例所示（但演示只有分页，没有导航箭头。）

所以我添加了.swiper1和.swiper2两个swiper容器，它只在分页处于活动状态时工作，但是如果同时添加导航2，则第二个swiper不会滑动

这里有一支钢笔

（我也向Nav添加了不同的类。当您单击箭头时，您可以看到DOM中发生了一些事情，但没有显示的视觉变化。）

因此，现在导航功能正常了。我必须将.swiper容器也添加到每个新的swiper中。
您不需要对JS文件做任何事情。您所需要做的只是在分页中添加一个额外的类，在幻灯片中添加一个额外的类，并在其他所有方面区分其余的类（请参见下面的代码）.使用此功能，您可以在同一页中显示任意多个幻灯片

 <div class="swiper-container swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination1"></div>
    </div>

    <!-- Swiper -->
    <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination2"></div>

 <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.swiper1', {
    pagination: '.swiper-pagination1',
    paginationClickable: true,
});
var swiper2 = new Swiper('.swiper2', {
    pagination: '.swiper-pagination2',
    paginationClickable: true,
});
<script>


幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
幻灯片7
幻灯片8
幻灯片9
幻灯片10
幻灯片1
幻灯片2
$(".locality-tab").on("click",function(){ 
    setTimeout(function () {
        newSwiper.update();
    }, 400);
});

var swiper = new Swiper('.swiper-container.swiper-one', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

var swiperTwo = new Swiper('.swiper-container.swiper-two', {
  loop: true,
  navigation: {
    nextEl: '.modal-swiper-button-next',
    prevEl: '.modal-swiper-button-next',
  },
});

 <div class="swiper-container swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination1"></div>
    </div>

    <!-- Swiper -->
    <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination2"></div>

 <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.swiper1', {
    pagination: '.swiper-pagination1',
    paginationClickable: true,
});
var swiper2 = new Swiper('.swiper2', {
    pagination: '.swiper-pagination2',
    paginationClickable: true,
});
<script>