[英]Add custom arrows to the slider
我在MODX網站上有ms2Gallery。 我想添加一些功能(添加左右按鈕)。
<div class="large-12 medium-12 columns main_page_preview text-center">
<div class="main_page_title large-8 medium-8 large-offset-2 medium-offset-2 columns">
<h1>NAME</h1>
</div>
<div id="msGallery">
<div class="large-12 medium-12 columns" style="max-height: 845px; overflow: hidden; margin-bottom: 15px;" href="/assets/images/resources/33/banya-10.jpg">
<img src="/assets/images/resources/33/banya-10.jpg" width="100%" alt="" title="" id="mainImage">
</div>
<div class="clearfix"></div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-01.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-01.jpg">
<img src="/assets/images/resources/33/360x270/banya-01.jpg" alt="" title="banya_01.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-04.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-04.jpg">
<img src="/assets/images/resources/33/360x270/banya-04.jpg" alt="" title="banya_04.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-06.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-06.jpg">
<img src="/assets/images/resources/33/360x270/banya-06.jpg" alt="" title="banya_06.jpg" width="100%" data-id="">
</a>
</div>
<a href="javascript:void(0)"><img src="build/img/prev-left.png" class="left-arrow-gallery" id="leftarrow"></a>
<a href="javascript:void(0)"><img src="build/img/next-right.png" class="right-arrrow-gallery" id="rightarrow"></a>
</div>
為了解決這個問題,我創建了以下js代碼:
var clicks= 0;
$('#rightarrow').on('click', function(){
clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})
但是,無論我單擊右箭頭多少次,我都希望減少左鍵單擊的元素。
var clicks = 0;
var leftClicks = 0;
var _ElementCount = $(".thumbnail").length;
$('#rightarrow').on('click', function(){
clicks = _ElementCount ? clicks = 0 : clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks = 0 ? clicks = _ElementCount : clicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.