如何在javascript中的活动图像滑块的左侧和右侧包含尖括号

Question

我有一个简单的图像滑块，如下面的小提琴所示，当有更多图像要显示时，它会在单击活动图像时滑动。

如何在活动图像的左侧和右侧包含尖括号以通知用户并使用户能够在图像之间转换？

我还想确保当没有更多幻灯片向左或向右过渡时，尖括号不会显示。

我能够在图像上包含箭头，但无法让它们执行与单击下一个或上一个图像时触发幻灯片更改相同的操作。

谢谢您的帮助。

 $(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>

Answer 1

嗨，请尝试以下更改：

<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>