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

Question

我有一个简单的图像滑块，如下面的小提琴所示，当有更多图像要显示时，单击活动图像即可滑动。如何在活动图像的左侧和右侧添加尖括号，以告知用户并使用户能够在图像之间进行转换？我还想确保当没有更多幻灯片可以过渡到左侧或右侧时，尖括号不会显示。我能够在图像上包含箭头，但无法让它们执行与单击下一个或上一个图像时触发幻灯片更改相同的操作。谢谢您的帮助。

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>