swiper:1ページに複数のマルチキャストがあり、互いに影響しません.
最近は1ページに複数のマルチキャストマップを表示する機能を実現し、
htmlコードは次のとおりです.
jsコード
方法1:
方法2:エッセンス版
jqueryでセレクタを使用するコンテキスト,$(elem,コンテキスト)
htmlコードは次のとおりです.
<ul>
<loop $actorList $k $v/>
<li class="list<=$k+1/>">
<div class="swiper-container">
//
<div class="swiper-wrapper">
<php $images = json_decode($v.ImageAttach,true) />php/>
<loop $images $key $img/>
<a href="javascript:void(0)" class="swiper-slide">
<img src="<=$img/>"/>
a>
loop/>
div>
//
<div class="swiper-pagination swiper-pagination<=$k+1/>">div>
//
<div class="arrow-left">
<span class="arrow-icon">span>
div>
<div class="arrow-right">
<span class="arrow-icon">span>
div>
div>
li>
loop/>
ul>
jsコード
方法1:
$("ul>li").each(function(){
var thisClass = $(this).attr("class");
$(this).children(".swiper-container").swiper({
loop: true,
initialSlide :0,
pagination: '.'+thisClass + " .swiper-pagination",
nextButton: '.'+thisClass + " .arrow-right",
prevButton: '.'+thisClass + " .arrow-left"
});
});
方法2:エッセンス版
jqueryでセレクタを使用するコンテキスト,$(elem,コンテキスト)
$(".swiper-container").each(function(){
$(this).swiper({
loop: true,
initialSlide :0,
pagination:$('.swiper-pagination',this),
nextButton: $('.arrow-right',this),
prevButton:$('.arrow-left',this)
});
});