0

My name is Rachel I am new here. I tried to look at some posts before and I know this question's been asked before the answer wasn't solving my problem because I have a different cod (other names and other Variables).

The problem is that the Right and the left Arrows move the down slideshow

I tried this one: Multiple slideshows on one page makes the first one not work anymore

and this one: How to add a second slideshow on the same webpage

p.s: if someone can edit my post and make my code run I could not do it myself on W3School console it run perfectly

Please do not drastically change my code (I used W3School CSS and tutorials).

Here is my HTML + Javascript + CSS(external):

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-white";
}
.mySlides {
  display: none
}

.w3-left,
.w3-right,
.w3-badge {
  cursor: pointer
}

.w3-badge {
  height: 13px;
  width: 13px;
  padding: 0
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />

<body>

  <div class="w3-container">
    <h2>Slideshow Indicators</h2>
    <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
  </div>

  <div class="w3-content w3-display-container" style="max-width:800px">
    <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
    <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
    <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
      <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
      <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>

  <div class="w3-container">
    <h2>Slideshow Indicators</h2>
    <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
  </div>

  <div class="w3-content w3-display-container" style="max-width:800px">
    <img class="mySlides2" src="img_nature_wide.jpg" style="width:100%">
    <img class="mySlides2" src="img_fjords_wide.jpg" style="width:100%">
    <img class="mySlides2" src="img_mountains_wide.jpg" style="width:100%">
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
      <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
      <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
  </div>






</body>
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81

1 Answers1

0

the functions in your top <script> have the same names as in your bottom <script> that is why they get overridden. Essentially, both sliders call the bottom definition of the functions. A quick and dirty fix is just renaming the bottom ones:

var slideIndex -> var slideIndex2

function plusDivs(n) -> function plusDivs2(n)

function currentDiv(n) -> function currentDiv2(n)

function showDivs(n) -> function showDivs2(n)

Remember to update every mention of slideIndex inside your renamed functions to slideIndex2 as well.

Also, in your mySlides2 html, change the onclick= to match your new function names.

To summarize: -Rename everything in your second <script> tag by adding "2" at the end

-Then make your second slider html call the renamed functions instead of the original ones.

EDIT:

I just noticed, you need to rename the css class demo in the bottom slider html markup as well, or your bullets won't display correctly.

Jan Mund
  • 151
  • 6