javascript - 如何在 JavaScript 中的事件图像 slider 的左侧和右侧包含尖括号

Question

我有一个简单的图像 slider ，如下面的 fiddle 所示，当有更多图像要显示时，单击事件图像即可滑动。

如何在事件图像的左侧和右侧添加尖括号，以通知用户并使用户能够在图像之间进行转换？

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

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

感谢您的帮助。

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