How to include angled brackets to the left and right of the active image slider in javascript

Question

I have a simple image slider as shown in the fiddle below that slides upon clicking the active image when there are more images to show.

How can I include angled brackets to the left and right of the active image to inform and enable users to transition between images?

I will also like to make sure that the angled brackets do not show when there are no more slides to transition to the left or right.

I was able to include the arrows on the images but unable to get them to perform the same action of triggering the slide change as occurs when the next or previous image is clicked.

Thanks for the help.

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

Hi please try below changes:

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

And your javascript function should be something like this:

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