W3.CSS and w3.includeHTML();

witt · November 2, 2018

Hello,

I am working on a webpage. I want to include some parts like the automatic slidesshow in the header or the footer.

This ist the code of the page I am working on:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
<link href="images/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/w3-theme-xxx.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.mySlides {display:none;}
</style>

</head>

<body class="w3-content" style="max-width:1260px">

<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-bar-block w3-collapse w3-top w3-animate-bottom w3-theme-l4 w3-card" style="z-index:3;width:240px; padding-top:25px;" id="mySidebar">
  <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Menü schließen <i class="fa fa-remove"></i></a>
  <a class="w3-bar-item w3-button w3-text-theme" href="index.html">Start</a>
  <a class="w3-bar-item w3-button" href="produkte.html">Produkte</a>
  <a class="w3-bar-item w3-button" href="kontakt.html">Kontakt</a>
  <a class="w3-bar-item w3-button" href="jobs.html">Jobangebote</a>
  <a class="w3-bar-item w3-button" href="filme.html">Filme</a>
  <a class="w3-bar-item w3-button" href="login.html">Login</a>
  <a class="w3-bar-item w3-button" href="impressum.html">Impressum + Datenschutz</a>
</nav>

<!-- Top menu on small screens -->
<header class="w3-bar w3-top w3-hide-large w3-blue w3-large">
  <a href="javascript:void(0)" class="w3-bar-item w3-button w3-left" onclick="w3_open()"><i class="fa fa-bars"></i></a>
</header>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-card-2" style="margin-left:300px;background: none repeat scroll 0% 0% #FFF;">

<!-- Push down content on small screens -->
<div class="w3-hide-large" style="margin-top:43px"></div>

<header class="w3-container w3-hide-small" style="padding-top:9px;">
    <div class="mySlides w3-card-4 w3-panel">
	<div class="w3-row-paading">
	<div class="w3-panel w3-half">
	<h1><b>Text</b></h1>
	<h2>Text</h2>
	<p>more Text</p>
 	</div>
	<div class="w3-panel w3-half">
	<img class="w3-card-4" src="img/auswertung1h.jpg" alt="" style="width:100%">
 	</div>
 	</div>
  </div>

      <div class="mySlides w3-card-4 w3-panel">
	<div class="w3-row-paading">
	<div class="w3-panel w3-half">
	<h1><b>Text</b></h1>
	<h2>Text</h2>
	<p>more Text</p>
 	</div>
	<div class="w3-panel w3-half">
	<img class="w3-card-4" src="img/auswertung2h.jpg" alt="" style="width:100%">
 	</div>
 	</div>
  </div>

      <div class="mySlides w3-card-4 w3-panel">
	<div class="w3-row-paading">
	<div class="w3-panel w3-half">
	<h1><b>Text</b></h1>
	<h2>Text</h2>
	<p>Text</p>
 	</div>
	<div class="w3-panel w3-half">
	<img class="w3-card-4" src="img/gebr.gussasphalt-kocher-auf-sattelauflieger-01h.jpg" alt="" style="width:100%">
 	</div>
 	</div>
  </div>

</header>

<header class="w3-container w3-hide-large w3-hide-medium" style="padding-top:20px;">
  <img class="w3-image" src="images/logo.jpg" alt="logo" />
</header>

<div class="w3-container" style="padding:32px;">

<h1 class="w3-text-blue">Text</h1>
<hr class="blue">

<h2>Text</h2>
<div class="w3-row-padding">
<div class="w3-container w3-half">
<img class="w3-image w3-card-4" src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="cursor:zoom-in"
onclick="document.getElementById('id01').style.display='block'">
<p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p>
</div>

<div class="w3-container w3-half">
<ul>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
</ul>
</div>

</div>
<hr class="blue">

  <div id="id01" class="w3-modal w3-animate-zoom">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-blue"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">×</span>
        <h2 class="w3-text-white">Text</h2>
      </header>
      <div class="w3-content w3-display-container">

<div class="w3-display-container mySlides1 w3-animate-opacity">  
<img src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-02.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-03.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 3/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-04.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 4/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-05.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 5/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-06.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 6/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-07.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 7/7</div>
</div>

  <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,0)">❮</button>
  <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,0)">❯</button>

	</div>
    </div>
  </div>

<h2>Text</h2>
<div class="w3-row-padding">
<div class="w3-container w3-half">
<img class="w3-image w3-card-4" src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="cursor:zoom-in"
onclick="document.getElementById('id02').style.display='block'">
<p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p>
</div>

<div class="w3-container w3-half">
<ul>
<li>blabla</li>
<li>blabla</li>
</ul>
</div>

</div>
<hr class="blue">

  <div id="id02" class="w3-modal w3-animate-zoom">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-blue"> 
        <span onclick="document.getElementById('id02').style.display='none'" 
        class="w3-button w3-display-topright">×</span>
        <h2 class="w3-text-white">Text</h2>
      </header>
      <div class="w3-content w3-display-container">

<div class="w3-display-container mySlides2 w3-animate-opacity">  
<img src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/2</div>
</div>
<div class="w3-display-container mySlides2 w3-animate-opacity">
<img src="img/schweissbahnverlegegeraet_mit_andrueckrolle-2.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/2</div>
</div>

  <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,1)">❮</button>
  <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,1)">❯</button>

	</div>
    </div>
  </div>

<h2>Text</h2>
<div class="w3-row-padding">
<div class="w3-container w3-half">
<img class="w3-image w3-card-4" src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="cursor:zoom-in"
onclick="document.getElementById('id03').style.display='block'">
<p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p>
</div>

<div class="w3-container w3-half">
<ul>
<li>blabla</li>
</ul>
</div>

</div>
<hr class="blue">

  <div id="id03" class="w3-modal w3-animate-zoom">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-blue"> 
        <span onclick="document.getElementById('id03').style.display='none'" 
        class="w3-button w3-display-topright">×</span>
        <h2 class="w3-text-white">Text</h2>
      </header>
      <div class="w3-content w3-display-container">

<div class="w3-display-container mySlides3 w3-animate-opacity">  
<img src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/1</div>
</div>

  <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,2)">❮</button>
  <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,2)">❯</button>

	</div>
    </div>
  </div>


</div>

<footer class="w3-container w3-card-4 w3-blue">
<p class="w3-center"><i class="fa fa-copyright"></i> Company 2018</p>
</footer>
     
</div>

<script>
// Open and close the sidebar on medium and small screens
function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}
</script>

<script>
var slideIndex = [1,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>

<script>
var slideIndex1 = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex1++;
    if (slideIndex1 > x.length) {slideIndex1 = 1} 
    x[slideIndex1-1].style.display = "block"; 
    setTimeout(carousel, 5000); 
}
</script>
</body>
</html>

So I have excluded the header section and named and saved it header.html

<header class="w3-container" style="padding-top:9px;">
    <div class="mySlides w3-card-4 w3-panel">
	<div class="w3-row-paading">
	<div class="w3-panel w3-half">
	<h1><b>Company</b></h1>
	<h2>New</h2>
	<p>Text</p>
 	</div>
	<div class="w3-panel w3-half">
	<img class="w3-card-4" src="img/auswertung1h.jpg" alt="" style="width:100%">
 	</div>
 	</div>
  </div>

      <div class="mySlides w3-card-4 w3-panel">
	<div class="w3-row-paading">
	<div class="w3-panel w3-half">
	<h1><b>Company</b></h1>
	<h2>New</h2>
	<p>Text</p>
 	</div>
	<div class="w3-panel w3-half">
	<img class="w3-card-4" src="img/auswertung2h.jpg" alt="" style="width:100%">
 	</div>
 	</div>
  </div>

      <div class="mySlides w3-card-4 w3-panel">
	<div class="w3-row-paading">
	<div class="w3-panel w3-half">
	<h1><b>Company</b></h1>
	<h2>Text</h2>
	<p>more Text</p>
 	</div>
	<div class="w3-panel w3-half">
	<img class="w3-card-4" src="img/gebr.gussasphalt-kocher-auf-sattelauflieger-01h.jpg" alt="" style="width:100%">
 	</div>
 	</div>
  </div>

</header>

And changed the code of the page into:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
<link href="images/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/w3-theme-xxx.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.mySlides {display:none;}
</style>

<script src="js/w3.js"></script>

</head>

<body class="w3-content" style="max-width:1260px">

<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-bar-block w3-collapse w3-top w3-animate-bottom w3-theme-l4 w3-card" style="z-index:3;width:240px; padding-top:25px;" id="mySidebar">
  <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Menü schließen <i class="fa fa-remove"></i></a>
  <a class="w3-bar-item w3-button w3-text-theme" href="index.html">Start</a>
  <a class="w3-bar-item w3-button" href="produkte.html">Produkte</a>
  <a class="w3-bar-item w3-button" href="kontakt.html">Kontakt</a>
  <a class="w3-bar-item w3-button" href="jobs.html">Jobangebote</a>
  <a class="w3-bar-item w3-button" href="filme.html">Filme</a>
  <a class="w3-bar-item w3-button" href="login.html">Login</a>
  <a class="w3-bar-item w3-button" href="impressum.html">Impressum + Datenschutz</a>
</nav>

<!-- Top menu on small screens -->
<header class="w3-bar w3-top w3-hide-large w3-blue w3-large">
  <a href="javascript:void(0)" class="w3-bar-item w3-button w3-left" onclick="w3_open()"><i class="fa fa-bars"></i></a>
</header>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-card-2" style="margin-left:300px;background: none repeat scroll 0% 0% #FFF;">

<!-- Push down content on small screens -->
<div class="w3-hide-large" style="margin-top:43px"></div>

<div w3-include-html="header.html"></div>

<header class="w3-container w3-hide-large w3-hide-medium" style="padding-top:20px;">
  <img class="w3-image" src="images/logo.jpg" alt="logo" />
</header>

<div class="w3-container" style="padding:32px;">

<h1 class="w3-text-blue">Text</h1>
<hr class="blue">

<h2>Text</h2>
<div class="w3-row-padding">
<div class="w3-container w3-half">
<img class="w3-image w3-card-4" src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="cursor:zoom-in"
onclick="document.getElementById('id01').style.display='block'">
<p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p>
</div>

<div class="w3-container w3-half">
<ul>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
</ul>
</div>

</div>
<hr class="blue">

  <div id="id01" class="w3-modal w3-animate-zoom">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-blue"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">×</span>
        <h2 class="w3-text-white">Text</h2>
      </header>
      <div class="w3-content w3-display-container">

<div class="w3-display-container mySlides1 w3-animate-opacity">  
<img src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-02.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-03.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 3/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-04.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 4/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-05.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 5/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-06.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 6/7</div>
</div>
<div class="w3-display-container mySlides1 w3-animate-opacity">
<img src="img/svg_250_schweissbahnverlegemaschine-07.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 7/7</div>
</div>

  <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,0)">❮</button>
  <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,0)">❯</button>

	</div>
    </div>
  </div>

<h2>Text</h2>
<div class="w3-row-padding">
<div class="w3-container w3-half">
<img class="w3-image w3-card-4" src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="cursor:zoom-in"
onclick="document.getElementById('id02').style.display='block'">
<p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p>
</div>

<div class="w3-container w3-half">
<ul>
<li>blabla</li>
<li>blabla</li>
</ul>
</div>

</div>
<hr class="blue">

  <div id="id02" class="w3-modal w3-animate-zoom">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-blue"> 
        <span onclick="document.getElementById('id02').style.display='none'" 
        class="w3-button w3-display-topright">×</span>
        <h2 class="w3-text-white">Text</h2>
      </header>
      <div class="w3-content w3-display-container">

<div class="w3-display-container mySlides2 w3-animate-opacity">  
<img src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/2</div>
</div>
<div class="w3-display-container mySlides2 w3-animate-opacity">
<img src="img/schweissbahnverlegegeraet_mit_andrueckrolle-2.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/2</div>
</div>

  <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,1)">❮</button>
  <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,1)">❯</button>

	</div>
    </div>
  </div>

<h2>Text</h2>
<div class="w3-row-padding">
<div class="w3-container w3-half">
<img class="w3-image w3-card-4" src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="cursor:zoom-in"
onclick="document.getElementById('id03').style.display='block'">
<p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p>
</div>

<div class="w3-container w3-half">
<ul>
<li>blabla</li>
</ul>
</div>

</div>
<hr class="blue">

  <div id="id03" class="w3-modal w3-animate-zoom">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-blue"> 
        <span onclick="document.getElementById('id03').style.display='none'" 
        class="w3-button w3-display-topright">×</span>
        <h2 class="w3-text-white">Text</h2>
      </header>
      <div class="w3-content w3-display-container">

<div class="w3-display-container mySlides3 w3-animate-opacity">  
<img src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="width:100%">
<div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/1</div>
</div>

  <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,2)">❮</button>
  <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,2)">❯</button>

	</div>
    </div>
  </div>


</div>

<footer class="w3-container w3-card-4 w3-blue">
<p class="w3-center"><i class="fa fa-copyright"></i> Company 2018</p>
</footer>
     
</div>

<script>
// Open and close the sidebar on medium and small screens
function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}
</script>

<script>
var slideIndex = [1,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>

<script>
var slideIndex1 = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex1++;
    if (slideIndex1 > x.length) {slideIndex1 = 1} 
    x[slideIndex1-1].style.display = "block"; 
    setTimeout(carousel, 5000); 
}
</script>
  
<script>
w3.includeHTML();
</script>
  
</body>
</html>

But it is not working as expected. The content of header..html is not visible. If I remove

<style>
.mySlides {display:none;}
</style>

from the head section, the 3 slides become visible (but not working as a slideshow).

What needs to be done to make this work?

Thanks for your attention

dsonesuk · November 2, 2018

As it reads from top to bottom, and the JavaScript code relies on the html along with there class name and id to be present to apply the code necessary to run the slide show. it seems you are running the code in the wrong order. Code to run the slideshow first! Before including the slideshow html code, it should be the other way round.

Edited November 2, 2018 by dsonesuk

witt · November 2, 2018

Hello dsonesuk,

thank you for your quick reply.

Your hint sounds logical to me and so I 've tried to change the order of the scripts (I even had the carousel script in the header.html), but none auf my attempts made the header slideshow visible. Where would you put the script or what would be your order?

dsonesuk · November 3, 2018

Reading through w3.include tutorial, it says you have to use a callback function, which waits till the header code is included before running carousel code

//Placed before any slideshow related defined variables and functions
w3.includeHTML(myCallback);

            function myCallback() {
                // code that has to wait goes here
                carousel();
            }

witt · November 3, 2018

Thank you - that solved the problem.

It works now 🙂

Sign In

W3.CSS and w3.includeHTML();

Recommended Posts

witt

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

witt

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

witt

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity