Duplicated slides on the same page

Asked

Viewed 6 times

-1

I’m creating a website and I need to put 2 slides of images on the same page. But when I copy the same conflict code. When I open the second slide, open the first slide group.

MATERIALS × 
<div class="mySlides">
  <div class="numbertext">1 / 9</div>
  <img src="images/demo/blackamberg.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">2 / 9</div>
  <img src="images/demo/negrescog.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">3 / 9</div>
  <img src="images/demo/whitepiracemag.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">4 / 9</div>
  <img src="images/demo/lunag.png" style="width:100%">
</div>
  
<div class="mySlides">
  <div class="numbertext">5 / 9</div>
  <img src="images/demo/primatag.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">6 / 9</div>
  <img src="images/demo/verdeubatubag.png" style="width:100%">
</div>
<div class="mySlides">
  <div class="numbertext">7 / 9</div>
  <img src="images/demo/whiteblizzardg.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">8 / 9</div>
  <img src="images/demo/whitedallasg.png" style="width:100%">
</div>
<div class="mySlides">
  <div class="numbertext">9 / 9</div>
  <img src="images/demo/whitegalaxyg.png" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

<div class="caption-container">
  <p id="caption"></p>
</div>


<div class="column">
  <img class="demo cursor" src="images/demo/blackamber.png" style="width:100%" onclick="currentSlide(1)" alt="Black Amber">
</div>
<div class="column">
    
  <img class="demo cursor" src="images/demo/negresco.png" style="width:100%" onclick="currentSlide(2)" alt="Negresco">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/whitepiracema.png" style="width:100%" onclick="currentSlide(3)" alt="White Piracema">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/luna.png" style="width:100%" onclick="currentSlide(4)" alt="Luna Pearl">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/primata.png" style="width:100%" onclick="currentSlide(5)" alt="Primata">
</div>
<div class="column">
    
  <img class="demo cursor" src="images/demo/Verdeubatuba.png" style="width:100%" onclick="currentSlide(6)" alt="Verde Ubatuba">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/whiteblizzard.png" style="width:100%" onclick="currentSlide(7)" alt="White Blizzard">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/whitedallas.png" style="width:100%" onclick="currentSlide(8)" alt="White Dallas">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/whitegalaxy.png" style="width:100%" onclick="currentSlide(9)" alt="White Galaxy">
</div>
Function openModal1() { 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 = Dots[slideIndex-1]. alt; }

QUARTIZITO × 
<div class="mySlides">
  <div class="numbertext">1 / 9</div>
  <img src="images/demo/aag.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">2 / 9</div>
  <img src="images/demo/bbg.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">3 / 9</div>
  <img src="images/demo/ccg.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">4 / 9</div>
  <img src="images/demo/ddg" style="width:100%">
</div>
  
<div class="mySlides">
  <div class="numbertext">5 / 9</div>
  <img src="images/demo/eeg" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">6 / 9</div>
  <img src="images/demo/ffg.png" style="width:100%">
</div>
<div class="mySlides">
  <div class="numbertext">7 / 9</div>
  <img src="images/demo/ggg.png" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">8 / 9</div>
  <img src="images/demo/hhg.png" style="width:100%">
</div>
<div class="mySlides">
  <div class="numbertext">9 / 9</div>
  <img src="images/demo/iig.png" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

<div class="caption-container">
  <p id="caption"></p>
</div>


<div class="column">
  <img class="demo cursor" src="images/demo/aa.png" style="width:100%" onclick="currentSlide(1)" alt="Black Amber">
</div>
<div class="column">
    
  <img class="demo cursor" src="images/demo/bb.png" style="width:100%" onclick="currentSlide(2)" alt="Negresco">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/cc.png" style="width:100%" onclick="currentSlide(3)" alt="White Piracema">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/dd" style="width:100%" onclick="currentSlide(4)" alt="Luna Pearl">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/ee.png" style="width:100%" onclick="currentSlide(5)" alt="Primata">
</div>
<div class="column">
    
  <img class="demo cursor" src="images/demo/ff.png" style="width:100%" onclick="currentSlide(6)" alt="Verde Ubatuba">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/gg.png" style="width:100%" onclick="currentSlide(7)" alt="White Blizzard">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/hh.png" style="width:100%" onclick="currentSlide(8)" alt="White Dallas">
</div>
<div class="column">
  <img class="demo cursor" src="images/demo/ii.png" style="width:100%" onclick="currentSlide(9)" alt="White Galaxy">
</div>
Function openModal1() { 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 = Dots[slideIndex-1]. alt; }

slide
No answers

Browser other questions tagged slide

You are not signed in. Login or sign up in order to post.