我怎样才能拥有多个＆＃34; Swiper＆＃34;幻灯片放在一个页面上

时间：2015-08-20 13:02:48

标签： javascript jquery slideshow swiper

我正在使用Swiper Slideshow。我正在使用this particular version。我在the exact code使用了{{3}}。

添加第二个＆＃34; Swiper＆＃34;时，分页无法正常工作。

我尝试给第二个＆＃34; swiper＆＃34;容器，但它没有工作。

我怎样才能在同一页面中有两个？

感谢。

10 个答案:

答案 0 :(得分：11)

他们的支持向我发送了DEMO。它有效！

您无需对JS文件执行任何操作。 您只需要为分页添加一个额外的类，在幻灯片中添加一个额外的类，并在其他所有类别上区分其余的类（请参阅下面的代码）。有了这个，您可以在同一页面中拥有任意数量的slishows。

<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 :(得分：1)

  1. 添加另一个类，例如：

    class="swiper-container two" ...

  2. 在 js 中追加类：

    new Swiper('.swiper-container.two', { ...

这对我有用

答案 2 :(得分：0)

你走的是正确的道路 - 你需要为第二个swiper添加一个不同的类，但还需要在dist/js/swiper.min.js中添加对新类的引用，否则它只会使用原始类定位元素。它应该只是复制相关部分并用新ID重复它们（与我对wow.js的处理方式相同）。

答案 3 :(得分：0)

我目前的Swiper版本是3.4.2。当我点击next-prev按钮时，页面上的所有滑块都会移动。

对于设置不同的next-prev按钮，我这样做了：

<div class="swiper-pager">
  <div class="swiper-button-next></div>
  <div class="swiper-button-prev></div>
</div>

=＆GT; 

<div class="swiper-pager">
  <div class="swiper-button-next swiper-button-next_slideshow<?=$module?>"></div>
  <div class="swiper-button-prev swiper-button-prev_slideshow<?=$module?>"></div>
</div>

在js：

$('#slideshow<?=$module?>').swiper({
  mode: 'horizontal',
  slidesPerView: 1,
  pagination: '.slideshow<?=$module?>',
  paginationClickable: true,
  // nextButton: '.swiper-button-next', // not work properly
  // prevButton: '.swiper-button-prev', // not work properly
  nextButton: '.swiper-button-next_slideshow<?=$module?>',
  prevButton: '.swiper-button-prev_slideshow<?=$module?>',
  spaceBetween: 30,
  autoplay: 2500,
  autoplayDisableOnInteraction: true,
  loop: true
});

答案 4 :(得分：0)

var i=1;
var str1='sliderBox_'
var str2='.sliderBox_';
$('.swiper-container').each(function (index,value) {

    var classAdd = str1 + i;
    var classCall = str2 + i;
    var next_slider = 'slider-next' + i;
    var prev_slider = 'slider-prev' + i;
    $(this).addClass(classAdd);
    $(this).parent().siblings(".sites-slider__prev").addClass(prev_slider);
    $(this).parent().siblings(".sites-slider__next").addClass(next_slider);
    new Swiper(classCall,{
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        navigation: {
            nextEl: ('.' + next_slider),
            prevEl: ('.' + prev_slider),
        },
        breakpoints: {
            1199: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 2,
            },
            600: {
                slidesPerView: 1,
            },
        }
    });
    i++;



});

答案 5 :(得分：0)

@David Martins 非常感谢，但是在当前版本4.5.0中，您需要修改一些js代码：

<script type="text/javascript">
// Init Swiper
var swiper1 = new Swiper('.swiper1', {
  pagination: {
    el: '.swiper-pagination1',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});
var swiper2 = new Swiper('.swiper2', {
  autoHeight: true,
  pagination:  {
    el: '.swiper-pagination2',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});

无论如何，非常感谢您的帮助！

答案 6 :(得分：0)

如果有人经过此处以寻找解决方案，以解决多个刷卡器之间的上一个按钮和下一个按钮的冲突，这就是我的解决方法（Nuxt.js / SSR项目）：

1）将id属性添加到按钮的div中： <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div> <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

2）在swiper选项对象中，引用新的id，而不是swiper-button-prev和swiper-button-next类：

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },

答案 7 :(得分：0)

在我的情况下，问题在于使用多个自动初始化的实例，同时使用Framework7 Core根据数据值更新幻灯片结果。

此用例缺少的部分是为滑动容器分配了id，例如：

<div class="swiper-container swiper-init" id="swiper-instance-{{
userId}}">

这点魔力会使所有内容重新工作，否则它将尝试重用Swiper实例，并对实例所属的实例感到非常困惑。弗拉基米尔再次想到了一切：）

答案 8 :(得分：0)

（例如CodePen中的示例：https://codepen.io/rasaf-ibrahim/pen/mdrVQEq）

我们需要在HTML上添加额外的类，并在CSS和JS上更改类，以使多个滑动幻灯片显示在单个页面中起作用。

步骤1： 让我们首先看一下滑动幻灯片放映的HTML文件

<!— HTML of swiper-1 -->

   <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(https://source.unsplash.com/800x600/?car)"></div>
      <div class="swiper-slide" style="background-image:url(https://source.unsplash.com/800x600/?tree)"></div>
      <div class="swiper-slide" style="background-image:url(https://source.unsplash.com/800x600/?tiger)"></div>
      <div class="swiper-slide" style="background-image:url(https://source.unsplash.com/800x600/?water)"></div>
      <div class="swiper-slide" style="background-image:url(https://source.unsplash.com/800x600/?dog)"></div>
    </div>

    <!-- Swiper - Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

<!—HTML of swiper-2 -->

<div class="swiper-container ">
   <div class="parallax-bg" style="background-image:url(https://source.unsplash.com/800x600/?space)" data-swiper-parallax="-23%"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300">Slide 1</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus
          felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. </p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">Slide 2</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus
          felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. </p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300">Slide 3</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus
          felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet
         </p>
      </div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

步骤-2： 首先，让我们确定两个滑动幻灯片显示的CSS文件中常见的类。

/* CSS of swiper-1 */

   
    .swiper-container {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;

    }

/* CSS of swiper-2 */

.swiper-container {
    position: relative;
    height: 100%;
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  
width: 100%;
  height: 100%;
  background: #000;
}

.swiper-slide {
  font-size: 18px;
  color: white;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 60px;
}

.parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;

}

.swiper-slide .title {
  font-size: 41px;
  font-weight: 300;
}

.swiper-slide .subtitle {
  font-size: 21px;
}

.swiper-slide .text {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.3;

}

我们可以看到， .swiper-container 和 .swiper-slide 是常见的类

步骤-3： 现在，让我们确定两个滑动幻灯片显示的JS文件中常见的类。

// JS File of Swiper-1

var swiper = new Swiper('.swiper-container ', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
    pagination: {
      el: '.swiper-pagination',
    },
  });

// JS file of swiper-2

var swiper = new Swiper('.swiper-container', {
    speed: 600,
    parallax: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

我们可以看到， .swiper-container 和 .swiper-pagination 是常见的类

步骤4： 现在，让我们在HTML文件的（。swiper-container .swiper-slide .swiper-pagination）的通用类上添加额外的类

<!— HTML of swiper-1 -->

  <div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide1" style="background-image:url(https://source.unsplash.com/800x600/?car)"></div>
      <div class="swiper-slide swiper-slide1" style="background-image:url(https://source.unsplash.com/800x600/?tree)"></div>
      <div class="swiper-slide swiper-slide1" style="background-image:url(https://source.unsplash.com/800x600/?tiger)"></div>
      <div class="swiper-slide swiper-slide1" style="background-image:url(https://source.unsplash.com/800x600/?water)"></div>
      <div class="swiper-slide swiper-slide1" style="background-image:url(https://source.unsplash.com/800x600/?dog)"></div>
      </div>

    <!-- Swiper - Add Pagination -->
    <div class="swiper-pagination swiper-pagination1"></div>
  </div>


    <!—HTML of swiper-2 -->

<div class="swiper-container swiper-container2">
  <div class="parallax-bg" style="background-image:url(https://source.unsplash.com/800x600/?space)" data-swiper-parallax="-23%"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide  swiper-slide2">
      <div class="title" data-swiper-parallax="-300">Slide 1</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus
          felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide2">
      <div class="title" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">Slide 2</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus
          felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. </p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide2">
      <div class="title" data-swiper-parallax="-300">Slide 3</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus
          felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.</p>
      </div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination2 swiper-pagination-white"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

第5步： 现在，使用CSS和JS上新添加的类来更改这些通用类。

CSS： 

/*  CSS of swiper-1 */

   
    .swiper-container1{
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide1 {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;

    }
  
/* CSS of swiper-2 */

.swiper-container2{
  position: relative;
  height: 100%;
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;

width: 100%;
height: 100%;
background: #000;
}

.swiper-slide2 {
font-size: 18px;
color: white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 60px;
}

.parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;

}

.swiper-slide .title {
font-size: 41px;
font-weight: 300;
}

.swiper-slide .subtitle {
font-size: 21px;
}

.swiper-slide .text {
font-size: 14px;
max-width: 400px;
line-height: 1.3;

}

JS： 

//  JS of swiper-1

var swiper = new Swiper('.swiper-container1', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
    pagination: {
      el: '.swiper-pagination1',
    },
  });


  // JS of swiper-2 

var swiper = new Swiper('.swiper-container2', {
  speed: 600,
  parallax: true,
  pagination: {
    el: '.swiper-pagination2',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

答案 9 :(得分：0)

这似乎对我有用，在 nuxtjs 中使用页面上有多个 swipers

在选项中使用 id 而不是类

   <div
      :id="`swiper-button-prev-${element}`"
      class="swiper-button-prev"
    ></div>
    <div
      :id="`swiper-button-next-${element}`"
      class="swiper-button-next"
    ></div>

... 选项：

navigation: {
  nextEl: `#swiper-button-next-${this.element}`,
  prevEl: `#swiper-button-prev-${this.element}`,
},

为了获得唯一的 id，我使用了

https://www.npmjs.com/package/uuid

生成的输出示例： 元素：47bfe557-d75f-455c-9a37-85b7935b297b

package.json

"dependencies": {    
    "uuid": "^8.3.2"
 },

在子组件上，可能不是最好的方法，但似乎有效

...

<ComponentName v-if="element" />

...

import { v4 as uuidv4 } from 'uuid';

...

data() {
  return {
    element: null,
  }
}

...

mounted() {
  this.element = uuidv4();
}
相关问题
最新问题