How do I switch slides?-CodePudding

<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 src="https://mdbcdn.b-cdn.net/img/new/standard/nature/182.webp"  alt="Project 1" />
        <div >
            <p >kart1</p>
        </div>
    </div>
    <div  id="card2">
        <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/182.webp"  alt="Project 2" />
        <div >
            <p >kart2</p>
        </div>
    </div>
    <div  id="card3">
        <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/182.webp"  alt="Project 3" />
        <div >
            <p >kart3</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>

var index = 0;
var slideCount = models.length;
showSlide(index);
document.querySelector("#arrowLeft").addEventListener("click", function () {
  index--;
  slideCount[index - 1].setAttribute("style", "display:none");
  showSlide(index);
  console.log(index);
});
document.querySelector("#arrowRight").addEventListener("click", function () {
  index  ;
  showSlide(index);
  console.log(index);
});
function showSlide(i) {
  index = i;
  if (i < 0) {
    index = slideCount - 1;
  }
  if (i >= slideCount) {
    index = 0;
  }
}

Do you think this way makes sense? and I don't know how to do it. can you teach me if you know a better way? because i am a beginner. I looked at some slide making ways but it was difficult.

CodePudding user response：

Since you want to have a slide effect (and I anticipate that you want to do it yourself and don't want to use a library for that), you need to do some css tricks. I've recently implemented something like this myself in React so maybe this will give you a full-blown example of what I'll mention below Github ReactSlider.tsx

Nevertheless here is my explanation of the function:

You can set all slides side by side in a big container that is way wider than your viewport.
When you want to change the slide you translate the container 100vw (100% of the view port width) to the left or right, depends on your direction (css transform option with translate3d(x, 0 [y], 0 [z]))
The outer container needs to have a overflow: hidden css option.

If you want to remove the other slide completely from the DOM, you can do it like this:

Create two containers side by side, one outside of the viewport one inside
On slide change, you translate the "old" one out of the viewport (like the example above) and the other inside.
Then you remove the content from the now "outside" container.

Here is an example:

let currentTranslation = 0;

function next() {
  currentTranslation -= 100;
  updateTranslation();
}

function prev() {
  currentTranslation  = 100;
  updateTranslation();
}

function updateTranslation() {
  let container = $(".inner-container");
  container.css('transform', 'translate3d('   currentTranslation   'vw, 0, 0)');
}

body {
  margin: 0;
  padding: 0;
}

.outer-container {
  background: red;
  min-height: 200px;
  overflow: hidden;
}

.inner-container {
  display: flex;
  flex-direction: row;
  min-height: 200px;
  flex-wrap: nowrap;
  gap: 10px;
  
  transition: .2s ease-in-out;
}

.slide1, .slide2, .slide3 {
  display: block;
  min-width: calc(100vw - 10px);
  background: green;
  min-height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <div ><h1>Slide 1</h1></div>
    <div ><h1>Slide 2</h1></div>
    <div ><h1>Slide 3</h1></div>
  </div>
</div>
<button onclick="next()">next</button>
<button onclick="prev()">prev</button>

CodePudding user response：

To switch slides using the code you provided, you will need to update the showSlide function to actually show the slide that you want to display. Currently, the function only updates the index variable, but it doesn't actually change the display of any elements on the page.

One way to implement this would be to use the index variable to access the correct slide from the models array, and then update the display of the elements on the page to show that slide. Here's an example of how you could do this:

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

  // Get the current slide from the models array
  var currentSlide = models[index];

  // Update the display of the elements on the page to show the current slide
  document.querySelector("#card1").style.display = "none";
  document.querySelector("#card2").style.display = "none";
  document.querySelector("#card3").style.display = "none";
  document.querySelector("#card"   (index   1)).style.display = "block";
}

This code assumes that you have elements on the page with IDs #slideTitle, #arrowLeft and #arrowRight, which are being used to display the title of the current slide and to allow the user to navigate between slides. You will need to adjust the code to match the structure of your HTML and the elements that you want to update.