HTML

How to hide the left arrow of the first image and the right arrow of the last image

Issue

In the modal popup I need to hide the left arrow of the first image, while the left arrow is visible for two middle slide. And hide the right arrow of the last image while the left arrow is visible in two middle slide. Basically the first image will have only right arrow, middle two image will have both arrow and the last image will have only left arrow.

Please help. Please use code snippet in full page.

function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
 slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1 ].className += " active";
    captionText.innerHTML = this.alt;
}
.modal {
  width: 58%;
  height: 100%;
  top: 0;
  position: fixed;
  display: none;
  background-color: rgba(22,22,22,0.5);
  margin-left: 300px;
  max-width: 779px;
  min-width: 779px;
}


.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.mySlides {
  display: none;
}


.close {
  position: relative;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  left: 584px;
  top: 90px;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}
.cursor {
  cursor: pointer;
}
.prev {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: -10%;
}

.next {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: 600px;
}
<body>
  <tr>
    <div class="row">
      <div class="column">
        <td>
        <p align="center"><img 

src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164" 

onclick="openModal();currentSlide(1)" class="hover-shadow cursor" ></p>
        </td>
      </div>
      <div class="column">
        <td>
        <p align="center"><img 

src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164" 

onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
        </td>
      </div>
  <tr>
  <div class="column">
    <td>
      <p align="center"><img  src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
    </td>
    <td>
  </div>
  <div class="column">
    <p align="center"><img  src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
          </td>
          </div>
        </tr>

    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="mySlides">
          <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%; position: relative; left: 10px; top: 109px;">
          <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
        </div>
        <div class="mySlides">
          <img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 98%; position: relative; left: 10px; top: 109px;">
          <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
        </div>
<div class="mySlides">
        <img src="https://source.unsplash.com/collection/190727/1600x920" style="width: 98%; position: relative; left: 10px; top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>
      <div class="mySlides">
        <img src="https://source.unsplash.com/collection/190727/1600x930" style="width: 98%; position: relative; left: 10px; top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

Solution

You could just check if your current slide is the first or last. Please look at code snippet bellow:

let arrowPrev = document.querySelector(".prev");
let arrowNext = document.querySelector(".next");
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides((slideIndex += n));
}

function currentSlide(n) {
  showSlides((slideIndex = n));
}

function showSlides(n) {
  var slides = document.getElementsByClassName("mySlides");
  //var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  slideIndex === 1
    ? (arrowPrev.style.display = "none")
    : (arrowPrev.style.display = "block");
  slideIndex === slides.length
    ? (arrowNext.style.display = "none")
    : (arrowNext.style.display = "block");
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  //for (i = 0; i < dots.length; i++) {
   // dots[i].className = dots[i].className.replace(" active", "");
  //}
  slides[slideIndex - 1].style.display = "block";
  //dots[slideIndex - 1 ].className += " active";
  captionText.innerHTML = this.alt;
}
.modal {
  width: 58%;
  height: 100%;
  top: 0;
  position: fixed;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  margin-left: 300px;
  max-width: 779px;
  min-width: 779px;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.mySlides {
  display: none;
}

.close {
  position: relative;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  left: 584px;
  top: 90px;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}
.cursor {
  cursor: pointer;
}
.prev {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: -10%;
}

.next {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: 600px;
}
<body>

  <tr>
    <div class="row">
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
              onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
        </td>
      </div>
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
              onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
        </td>
      </div>
  </tr>
  <tr>
    <div class="column">
      <td>
        <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164"
            onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
      </td>
      <td>
    </div>
    <div class="column">
      <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164"
          onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
        </td>
    </div>
  </tr>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close cursor" onclick="closeModal()">&times;</span>

      <div class="mySlides">

        <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>

      <div class="mySlides">

        <img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>
      <div class="mySlides">

        <img src="https://source.unsplash.com/collection/190727/1600x920" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>

      <div class="mySlides">
        <img src="https://source.unsplash.com/collection/190727/1600x930" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>
      <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>


      <script src="ind.js"></script>
</body>

Answered By – Nikola Pavicevic

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.