Unable to get sliding images in correct format on html page-CodePudding

I am new to HTML so have quite a limited understanding of it. I trying to have a manual sliding images, something similar to following : .
Code written by me to do it is

<div >
  <img class = "mySlides" src="car_image1.jpg">
  <img class = "mySlides" src="car_image2.jpg">
  <div  style="width:100%">
    <div  onclick="plusDivs(-1)">&#10094;</div>
    <div  onclick="plusDivs(1)">&#10095;</div>
    <span  onclick="currentDiv(1)"></span>
    <span  onclick="currentDiv(2)"></span>
    <span  onclick="currentDiv(3)"></span>
  </div>
</div>

which ends up giving both images on screen at same time.(I've scrolled down to give a better idea). I am not sure how to improve it. Hope to get a clearer idea from you all. Thank you in advance.

CodePudding user response：

Try adding the below script

<script>
var pos = 1;
Slides(pos);

function plusSlides(n) {
  showSlides(pos  = n);
}

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

function Slides(n) {
  var i;
  var images = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("w3-badge");
  if (n > images.length)
  {
  pos = 1
  }    
  if (n < 1) {
  pos = images.length
  }
  for (i = 0; i < images.length; i  ) {
      images[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i  ) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  images[pos-1].style.display = "block";  
  images[pos-1].className  = " active";
}
</script>

CodePudding user response：

Are your onClick="plusDivs(-1)" and onClick="plusDivs(1)" events being handled by some kind of programming like JavaScript? If they are, the handler (JavaScript) needs to run its own programming to change which image shows.

Have you checked your programming to make sure that's set up the way it needs to be? If you have JavaScript set up to manage that, and it's not running, you'll need to add code between your <head>...</head> tags.

For example, where ... implies other stuff might also be there, you might need something like this:

<head> ... <script src="https://yourdomain.com/folder/paths/your-javascript-goes-here.js"></script> ... </head>

JavaScript can also be in the body of your document, but I don't think I've ever dealt with it like that.

If you do determine you've got a JavaScript problem, try looking at this for some hints: https://www.w3schools.com/js/js_whereto.asp

If the page loads, and you know JavaScript is running, but both images are still showing before you click anything, you'll want to do as one of your commenters already suggested: change the style on the second image to "display:none;" It needs to start "hidden" so that your script can show it.