layui的模板引擎与swiper 2个swiper 相关联 swiper1和swiper2 点击

2个swiper 相关联 swiper1和swiper2 点击swiper1的上一题和下一题，就让swiper2显示对应的盒子，上下盒子一起动

两个swiper模板

调用两个模板并给data值

模板方法

初始化swiper1

点击上一题或下一题获取到swiper-pagination-current值

效果如图

swiper相关js

function swipers(){
	swiper1 = new Swiper('.swiper-container1', {
		pagination: {
			el: '.swiper-pagination1',
			type: 'fraction',
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		controller: {
		    control: swiper2,
		}
	});
}

//下一题
$(document).on('click','.swiper-button-next',function(){
	swiper2 = new Swiper('.swiper-container2');
	swiperIndex = $('.swiper-pagination-current').text();
	swiper2.slideTo(swiperIndex - 1);
});

//上一题
$(document).on('click','.swiper-button-prev',function(){
	swiper2 = new Swiper('.swiper-container2');
	swiperIndex = $('.swiper-pagination-current').text();
	swiper2.slideTo(swiperIndex - 1);
});

模板引擎相关js

<!-- 第三部分-开始做题 dohomework  -->
<script id="dohomework" type="text/html">
	<div class="swiper-container swiper-container1">
		<div class="swiper-wrapper">
			{{# layui.each(d, function(idx, items){ }}
			<div class="swiper-slide">
				<div class="homework-testtype">
					{{#  if(items.type == '01'){ }}
					<div class="homework-testtype1">
						<!-- 视频 -->
						<div class="div">看视频</div>
						<div class="div">
							<div class="homework-topic">
								<div id="player{{idx}}" class="homeworkplayer" data-idx="{{idx}}" data-uri="{{items.uri}}"></div>
							</div>
						</div>
						<!-- 视频 -->
					</div>
					{{#  }else if(items.type == '02' && items.questtype == '01'){ }}
					<div class="homework-testtype1">
						<!-- 传统单选 -->
						<div class="div">单选题</div>
						<div class="div">
							<div class="homework-topic">
								<div class="questitle">{{items.questdesc}}<p class="homework-uriimg">
									{{# layui.each(items.images, function(idx0, item0){ }}
									<img src="{{item0.uri}}"/>
									{{# }); }}
								</p></div>
							</div>
						</div>
						<!-- 传统单选 -->
					</div>
					{{#  }else if(items.type == '02' && items.questtype == '02'){ }}
					<div class="homework-testtype1">
						<!-- 传统多选 -->
						<div class="div">多选题</div>
						<div class="div">
							<div class="homework-topic">
								<div class="questitle">{{items.questdesc}}<p class="homework-uriimg">
									{{# layui.each(items.images, function(idx0, item0){ }}
									<img src="{{item0.uri}}"/>
									{{# }); }}
								</p></div>
							</div>
						</div>
						<!-- 传统多选 -->
					</div>
					{{#  }else if(items.type == '02' && items.questtype == '03'){ }}
					<div class="homework-testtype1">传统解答</div>
					{{#  }else if(items.type == '03' && items.questtype == '10'){ }}
					<div class="homework-testtype1">
						<!-- 在线单选 -->
						<div class="div">单选题</div>
						<div class="div">
							<div class="homework-topic">
								<div class="questitle">{{items.stem}}</div>
								<div class="quesoption">
									{{# layui.each(items.optioninfo, function(idx1, item1){ }}
									<div><p>{{options[idx1]}}</p>.{{item1}}</div>
									{{# }); }}
								</div>
							</div>
						</div>
						<!-- 在线单选 -->
					</div>
					{{# } }}
				</div>
			</div>
			{{# }); }}
		</div>
		<div class="swiper-pagination swiper-pagination1"></div>
		<div class="swiper-button-next">下一题</div>
		<div class="swiper-button-prev">上一题</div>
	</div>
</script>


<!-- 第四部分-选项-提交答案 -->
<script id="homeworksubmit" type="text/html">
	<div class="swiper-container swiper-container2">
	  <div class="swiper-wrapper">
		{{# layui.each(d, function(idx3, items3){ }}
	    <div class="swiper-slide">{{idx3}}</div>
		{{# }); }}
	  </div>
	  <!-- Add Pagination -->
	  <div class="swiper-pagination swiper-pagination2"></div>
	</div>
</script>

调用模板

renderDohomework('[data-role="dohomework"]',homeworklistCubedata);//做题-第三部分框架
swipers();
renderHomeworksubmit('[data-role="homeworksubmit"]',homeworklistCubedata);//做题-第四部分

模板方法

//做题-第四部分-模板
function renderHomeworksubmit(selector, data) {
	var htmls = $("#homeworksubmit").html();
	laytpl(htmls).render(data, function(html) {
		$(selector).html(html);
	});
};


//做题-第三部分-模板
function renderDohomework(selector, data) {
	var htmls = $("#dohomework").html();
	laytpl(htmls).render(data, function(html) {
		$(selector).html(html);
	});
};

反过来控制

function swipers(){
	swiper2 = new Swiper('.swiper-container2', {
		pagination: {
			el: '.swiper-pagination2',
			type: 'fraction',
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		controller: {
		    control: swiper1,
		}
	});
}

//下一题
$(document).on('click','.swiper-button-next',function(){
	swiperIndex = $('.swiper-pagination2 .swiper-pagination-current').text();
	swiper1.slideTo(swiperIndex - 1);
});

//上一题
$(document).on('click','.swiper-button-prev',function(){
	swiperIndex = $('.swiper-pagination2 .swiper-pagination-current').text();
	swiper1.slideTo(swiperIndex - 1);
});



renderDohomework('[data-role="dohomework"]',homeworklistCubedata);//做题-第三部分框架
swiper1 = new Swiper('.swiper-container1');
renderHomeworksubmit('[data-role="homeworksubmit"]',homeworklistCubedata);//做题-第四部分
swipers();