[英]How to include angled brackets to the left and right of the active image slider in javascript
我有一個簡單的圖像滑塊,如下面的小提琴所示,當有更多圖像要顯示時,它會在單擊活動圖像時滑動。
如何在活動圖像的左側和右側包含尖括號以通知用戶並使用戶能夠在圖像之間轉換?
我還想確保當沒有更多幻燈片向左或向右過渡時,尖括號不會顯示。
我能夠在圖像上包含箭頭,但無法讓它們執行與單擊下一個或上一個圖像時觸發幻燈片更改相同的操作。
謝謝您的幫助。
$(document).ready(function() { let $slider = $(".sliderG"); let sliderItem = $slider.children(".item.active"); let i = $slider.children(".item"); let i2 = $slider.children("#Arrows"); 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"); $(".item").removeClass("active"); that.addClass("active"); }); i2.on("click", function(e) { const that = $(this); let dataIndex = that.data("index"); $(".item").removeClass("active"); that.addClass("active"); }); });
.sliderG { width: 75%; height: 80%; position: absolute; margin: 0 auto; left: 0; right: 0; top: 50px; } .sliderG .item { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; position: absolute; background: url(https://www.g-money.com.gh/wp-content/uploads/2019/06/squircle-minG.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-radius: 10px; transition: all ease 0.7s; z-index: 1; transform: scale(0.8); left: -300px; right: 0; margin: 0 auto; } .sliderG .item.active { left: 0; right: 0; z-index: 2; opacity: 1; background: #ccc; transform: scale(1); } .sliderG .item img{ display: block; width: 100%; } .sliderG .item.active ~ .item { left: 0; right: -300px; } .sliderG .item.active + .item ~ .item { opacity: 0.3; visibility: hidden; } .sliderG .item.active + .item ~ .item:hover{ opacity: 0.7; } #Arrows{ display: flex; justify-content: space-between; height: auto; position: absolute; width: 100%; z-index: 9; top: 50%; } #Arrows i{ background-color: rgba(255, 255, 255, 0.25); color: #1C1D21; cursor: pointer; height: auto; padding: 15px; transition: background-color 0.5s, color 0.5s; } #Arrows i:first-of-type{ padding-right: 20px; } #Arrows i:last-of-type{ padding-left: 20px; } #Arrows i:hover{ background-color: rgba(28, 29, 33, 0.75); color: #EEEFF7; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class='sliderG'> <div class='item'> <img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Sending-MoneyT-scaled.jpg" alt="G-Money Send Money"> </div> <div class='item active'> <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Cash-Out at Agent"> </div> <div class='item'> <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Pay-MerchantT-scaled.jpg" alt="G-Money Pay Merchant"> </div> <div class='item'> <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Buy-AirtimeT-scaled.jpg" alt="G-Money Buy Airtime"> </div> <div class='item'> <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Bank-ServiceT-scaled.jpg" alt="G-Money Bank Account"> </div> <div class='item'> <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/03/Withdraw-at-AgentT-scaled.jpg" alt="G-Money Withdraw at Agent"> </div> <!--<div class='item'> <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Pay Bill"> </div>--> <div id="Arrows"> <i id="Prev" class="fa fa-chevron-left fa-3x" aria-hidden="true"></i> <i id="Next" class="fa fa-chevron-right fa-3x" aria-hidden="true"></i> </div> </div> </div>
嗨,請嘗試以下更改:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.