How do I switch slides?-CodePudding

I am new to JavaScript and trying to switch the slides using JS code.

As you can see, when the index is 0, the index of the slide is 1, when the index is 1, the index of the side is 2, but when the index is 2, the index of the site is also 2, and gives an error.
Click on the right slide is working randomly how do I solve this?
Probably the index calculations in the slide count function are conflicting.

var models = [
  {
    name: "Project 0",
    image: "/My Web Site/prj1.png",
  },
  {
    name: "Project 1",
    image: "/My Web Site/prj2.png",
  },
  {
    name: "Project 2",
    image: "/My Web Site/prj3.png",
  },
];

var index = 0;
var slideCount = models.length;

showSlide(index);
showOtherSlide(index);
document.querySelector("#arrowLeft").addEventListener("click", function () {
  index--;
  showSlide(index);
  showOtherSlide(index);
});

document.querySelector("#arrowRight").addEventListener("click", function () {
  index  ;
  showSlide(index);
  showOtherSlide(index);
});

function showSlide(i) {
  index = i;
  if (i < 0) {
    index = slideCount   1;
  }
  if (i >= slideCount) {
    index = slideCount - 2;
  }

  var currentSlide = models[index];
  document.querySelector(".card-text1").textContent = currentSlide.name;
  document
    .querySelector(".card-img-top1")
    .setAttribute("src", currentSlide.image);
}

function showOtherSlide(i) {
  index = i;
  if (i < 0) {
    index = slideCount - 1;
  }
  if (i >= slideCount) {
    index = slideCount - 1;
  }
  var sideSlide = models[index   1];
  document.querySelector(".card-text2").textContent = sideSlide.name;
  document.querySelector(".card-img-top2").setAttribute("src", sideSlide.image);
}

.projects {
  margin-top: 3em;
}
#arrowLeft {
  margin-bottom: 6%;
  color: #6b757d;
  cursor: pointer;
}
#arrowLeft:hover {
  color: black;
}

#arrowRight {
  cursor: pointer;
  margin-bottom: 6%;
  color: #6b757d;
}
#arrowRight:hover {
  color: black;
}
p {
  color: #a2a2a2;
  text-align: center;
  margin-top: 10px;
}

#card1 {
  display: inline-block;
}

#card2 {
  display: inline-block;
}
#card3 {
  display: none;
}
.card-img-top2 {
  width: 100%;
  height: 25vh;
}
.card-img-top1 {
  width: 100%;
  height: 25vh;
}

  <div >
          <h3>MY PROJECTS</h3>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            fill="currentColor"
            id="arrowLeft"
            
            viewBox="0 0 16 16"
          >
            <path
              fill-rule="evenodd"
              d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
            />
          </svg>
          <div  id="card1">
            <img  alt="Project 1" />
            <div >
              <p >kart1</p>
            </div>
          </div>
          <div  id="card2">
            <img  alt="Project 2" />
            <div >
              <p >kart2</p>
            </div>
          </div>

          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            fill="currentColor"
            id="arrowRight"
            
            viewBox="0 0 16 16"
          >
            <path
              fill-rule="evenodd"
              d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
            />
          </svg>
        </div>

CodePudding user response：

Simply use index as a global variable in all your functions, and check it in the begging of right and left buttons as flowing:

var index = 0;
var slideCount = models.length;

showSlide();
showOtherSlide();
document.querySelector('#arrowLeft').addEventListener('click', function () {
  if (index > 0) {
    index--;
    showSlide();
    showOtherSlide();
  }
});

document.querySelector('#arrowRight').addEventListener('click', function () {
  if (index < slideCount - 2) {
    index  ;
    showSlide();
    showOtherSlide();
  }
});

function showSlide() {
  var currentSlide = models[index];
  document.querySelector('.card-text1').textContent = currentSlide.name;
  document
    .querySelector('.card-img-top1')
    .setAttribute('src', currentSlide.image);
}

function showOtherSlide() {
  var sideSlide = models[index   1];
  document.querySelector('.card-text2').textContent = sideSlide.name;
  document.querySelector('.card-img-top2').setAttribute('src', sideSlide.image);
}

CodePudding user response：

Your slides are not updating because your model is of length 3 array which means indexes would be [0, 1, 2], so when you click on the right arrow and increment the index and when the index reaches the count 3, there is not any models[3] item available, so models[3] would be inaccessible. You did not handle this condition, so it is throwing you the error.

Below is the working example where I did the following changes in your code-

You don't need two methods showSlide and showOtherSlide, one method would do the job.
There should be a behavior that when it's the first iteration, you can't go more left, and when it's the last iteration, you can't go more right. so, I hide the arrows accordingly.
Your slides are displaying in this pair- [0, 1], [1, 2], [2, 3] which means when it is [2, 3] the second slide has no data, so I hide the second slide in the last iteration..
Your index variable is global, so no need to pass in functions. You can access it anywhere.
I used dummy images to show the output.

let leftA = document.querySelector("#arrowLeft");
let rightA = document.querySelector("#arrowRight");
let leftTextEl = document.querySelector(".card-text1");
let leftImgEl = document.querySelector(".card-img-top1");
let rightCard = document.querySelector("#card2");
let rightTextEl = document.querySelector(".card-text2");
let rightImgEl = document.querySelector(".card-img-top2");
var models = [
  {
    name: "Project 0",
    image: "https://www.gstatic.com/webp/gallery3/1.sm.png",
  },
  {
    name: "Project 1",
    image: "https://i.imgur.com/OB0y6MR.jpg",
  },
  {
    name: "Project 2",
    image: "https://i.imgur.com/CzXTtJV.jpg",
  },
];
var index = 0;
var slideCount = models.length;

showSlide();

leftA.addEventListener("click", function () {
  index--;
  showSlide();
});

rightA.addEventListener("click", function () {
  index  ;
  showSlide();
});

function manageArrow() {
  leftA.style.display = index == 0 ? 'none' : 'inline-block';
  rightA.style.display = index   1 == models.length ? 'none' : 'inline-block';
}

function showSlide() {
  manageArrow();
  
  var leftSlide = models[index];
  leftTextEl.textContent = leftSlide.name;
  leftImgEl.setAttribute("src", leftSlide.image);
  
  if(index  1 == models.length) {
    rightCard.style.display="none"
  } else {
    rightCard.style.display = "inline-block";
    var rightSlide = models[index   1];
    rightTextEl.textContent = rightSlide.name;
    rightImgEl.setAttribute("src", rightSlide.image);
  }
}

.projects {
  margin-top: 3em;
}
#arrowLeft {
  margin-bottom: 6%;
  color: #6b757d;
  cursor: pointer;
}
#arrowLeft:hover {
  color: black;
}

#arrowRight {
  cursor: pointer;
  margin-bottom: 6%;
  color: #6b757d;
}
#arrowRight:hover {
  color: black;
}
p {
  color: #a2a2a2;
  text-align: center;
  margin-top: 10px;
}

#card1 {
  display: inline-block;
}

#card2 {
  display: inline-block;
}
#card3 {
  display: none;
}
.card-img-top2 {
  width: 100%;
  height: 25vh;
}
.card-img-top1 {
  width: 100%;
  height: 25vh;
}

<div >
          <h3>MY PROJECTS</h3>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            fill="currentColor"
            id="arrowLeft"
            
            viewBox="0 0 16 16"
          >
            <path
              fill-rule="evenodd"
              d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
            />
          </svg>
          <div  id="card1">
            <img  alt="Project 1" />
            <div >
              <p >kart1</p>
            </div>
          </div>
          <div  id="card2">
            <img  alt="Project 2" />
            <div >
              <p >kart2</p>
            </div>
          </div>

          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            fill="currentColor"
            id="arrowRight"
            
            viewBox="0 0 16 16"
          >
            <path
              fill-rule="evenodd"
              d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
            />
          </svg>
        </div>