Как включить угловые скобки слева и справа от активного ползунка изображения в 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>