我有一個簡單的圖像滑塊，如下面的小提琴所示，當有更多圖像要顯示時，單擊活動圖像即可滑動。如何在活動圖像的左側和右側添加尖括號，以告知用戶并使用戶能夠在圖像之間進行轉換？我還想確保當沒有更多幻燈片可以過渡到左側或右側時，尖括號不會顯示。我能夠在圖像上包含箭頭，但無法讓它們執行與單擊下一個或上一個圖像時觸發幻燈片更改相同的操作。謝謝您的幫助。
1 回答
jeck貓
TA貢獻1909條經驗 獲得超7個贊
您好，請嘗試以下更改：
<div id="Arrows">G-Money Send Money
<i id="Prev" onclick="changeSlide('prev');"class=" fa fa-chevron-left fa-3x" aria-hidden="true"></i>
<i id="Next" onclick="changeSlide('next');"class=" fa fa-chevron-right fa-3x" aria-hidden="true"></i>
</div>
</div>
你的 javascript 函數應該是這樣的：
<script>
$(document).ready(function() {
let $slider = $(".sliderG");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
//let i2 = $slider.children("#prev");
let ind = 0;
$slider
.children(".item")
.each(function() {
$(this).attr("data-index", ind++);
});
i.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
//alert(dataIndex);
$(".item").removeClass("active");
that.addClass("active");
});
});
function changeSlide(n) {
$('#Next').css("display", "block");
$('#Prev').css("display", "block");
let $slider = $(".sliderG");
//console.log(n);
var len = $slider.children(".item").length;
if(n == 'prev'){
//alert(n);
var sliderItem = $slider.children(".item.active").prev();
}
else {
var sliderItem = $slider.children(".item.active").next();
}
let index = sliderItem.data("index");
if(index != undefined) {
//alert(index);
$(".item").removeClass("active");
sliderItem.addClass("active");
if(index == 0) {
$('#Prev').css("display", "none");
}
else if(index == len-1) {
$('#Next').css("display", "none");
}
}
}
</script>
- 1 回答
- 0 關注
- 120 瀏覽
添加回答
舉報
0/150
提交
取消