Jump to content

Again - Multiple SlideShows on same HTML page

witt

By witt
in JavaScript

 Share

Recommended Posts

witt Newbie

witt

Posted
Posted

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.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

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
Link to comment
Share on other sites
witt Newbie

witt

Posted
  • Author
Posted

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...