Jump to content
witt

Again - Multiple SlideShows on same HTML page

Recommended Posts

Hello,
I have 2 questions.
Question No. 1:
I want more than two manual slidesshows on a webpage.
The example on W3.CSS Slideshows for 2 slidesshows looks like this:

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
  <img class="mySlides1" src="img_lights.jpg" style="width:100%">
  <img class="mySlides1" src="img_mountains.jpg" style="width:100%">
  <img class="mySlides1" src="img_forest.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)"></button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)"></button>
</div>

<div class="w3-content w3-display-container">
  <img class="mySlides2" src="img_la.jpg" style="width:100%">
  <img class="mySlides2" src="img_ny.jpg" style="width:100%">
  <img class="mySlides2" src="img_chicago.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)"></button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)"></button>
</div>

<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showDivs(1, 0);
showDivs(1, 1);

function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
</script>

</body>
</html>


I've tried it myself with 3 slidesshows, but my solution does not work.

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
  <img class="mySlides1" src="img_lights.jpg" style="width:100%">
  <img class="mySlides1" src="img_mountains.jpg" style="width:100%">
  <img class="mySlides1" src="img_forest.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)"></button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)"></button>
</div>
<br>
<div class="w3-content w3-display-container">
  <img class="mySlides2" src="img_la.jpg" style="width:100%">
  <img class="mySlides2" src="img_ny.jpg" style="width:100%">
  <img class="mySlides2" src="img_chicago.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)"></button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)"></button>
</div>
<br>
<div class="w3-content w3-display-container">
  <img class="mySlides3" src="img_snowtops.jpg" style="width:100%">
  <img class="mySlides3" src="img_lights.jpg" style="width:100%">
  <img class="mySlides3" src="img_mountains.jp" style="width:100%">
  <button class="w3-button w3-red w3-display-left" onclick="plusDivs(-1, 2)"></button>
  <button class="w3-button w3-red w3-display-right" onclick="plusDivs(1, 2)"></button>
</div>

<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);

function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
</script>

</body>
</html>

What am I doing wrong?

Questions No. 2:

I have more than one w3.css modal on a webpage. How do I have to change the following code to work with more than one modal?

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <p>In this example we demonstrate how to close the modal by clicking outside of the modal box.</p>

  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal">
        <span onclick="document.getElementById('id01').style.display='none'"
        class="w3-button w3-display-topright">×</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>You have two options to close this modal:</p>
        <p>Click on the "x" or click anywhere outside of the modal!</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

Thank you for your attention.

Share this post


Link to post
Share on other sites

change

var slideIndex = [1,1];

to (add an additional for every slideshow added)

var slideIndex = [1,1,1];

and

src="img_mountains.jp"

to

src="img_mountains.jpg"

The multiple modal has been asked for before, do a search for multi

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Thank you very much - I 've spent hours and couldn' t find my mistake 🙂

My slideshows are OK now. And I have also found the solution for my question concerning the modal in this forum.

http://w3schools.invisionzone.com/topic/55976-multiple-modal-boxes-on-webpage/?tab=comments#comment-308210

You help me a lot.

Thank you from Hamburg, Germany

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...