Difference between revisions of "Team:Mingdao/DM test"

 
(58 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
<html>
 +
 
 +
<style>
 +
/****************************** DEFAULT WIKI SETTINGS ******************************/
 +
 
 +
  /* Clear the default wiki settings */
 +
 
 +
  #home_logo, #sideMenu { display:none; }
 +
  #sideMenu, #top_title, .patrollink  {display:none;}
 +
  #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
  body {background-color:white; }
 +
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
 
 +
</style>
 +
</html>
 +
 
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
Line 11: Line 29:
 
/* Slideshow container */
 
/* Slideshow container */
 
.slideshow-container {
 
.slideshow-container {
−
   max-width: 1000px;
+
   max-width: 100%;
 
   position: relative;
 
   position: relative;
 
   margin: auto;
 
   margin: auto;
Line 24: Line 42:
 
   padding: 16px;
 
   padding: 16px;
 
   margin-top: -22px;
 
   margin-top: -22px;
−
   color: black;
+
   color: gray;
 
   font-weight: bold;
 
   font-weight: bold;
−
   font-size: 18px;
+
   font-size: 25px;
−
   transition: 0.6s ease;
+
   transition: 1s ease;
 
   border-radius: 0 3px 3px 0;
 
   border-radius: 0 3px 3px 0;
 
}
 
}
Line 108: Line 126:
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <div class="numbertext">1 / 4</div>
 
   <div class="numbertext">1 / 4</div>
−
   <img src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--HomePage_DM_p1.png" style="width:80%">
+
   <img src="https://static.igem.org/mediawiki/2018/9/91/T--Mingdao--HomePage_DM_p1.png" style="display:block; margin:auto;" style="width:80%">
−
   <div class="text">Caption Text</div>
+
   <div class="text"></div>
 
</div>
 
</div>
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <div class="numbertext">2 / 4</div>
 
   <div class="numbertext">2 / 4</div>
−
   <img src="https://static.igem.org/mediawiki/2018/0/0a/T--Mingdao--HomePage_DM_p2.png" style="width:80%">
+
   <img src="https://static.igem.org/mediawiki/2018/0/0a/T--Mingdao--HomePage_DM_p2.png" style="display:block; margin:auto;" style="width:80%">
−
   <div class="text">Caption Two</div>
+
   <div class="text"></div>
 
</div>
 
</div>
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <div class="numbertext">3 / 4</div>
 
   <div class="numbertext">3 / 4</div>
−
   <img src="https://static.igem.org/mediawiki/2018/5/5f/T--Mingdao--HomePage_DM_p3.png" style="width:80%">
+
   <img src="https://static.igem.org/mediawiki/2018/5/5f/T--Mingdao--HomePage_DM_p3.png"style="display:block; margin:auto;"  style="width:80%">
−
   <div class="text">Caption Three</div>
+
   <div class="text"></div>
 
</div>
 
</div>
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <div class="numbertext">4 / 4</div>
 
   <div class="numbertext">4 / 4</div>
−
   <img src="https://static.igem.org/mediawiki/2018/7/7e/T--Mingdao--HomePage_DM_p4.png" style="width:80%">
+
   <img src="https://static.igem.org/mediawiki/2018/7/7e/T--Mingdao--HomePage_DM_p4.png" style="display:block; margin:auto;" style="width:80%">
−
   <div class="text">Caption Three</div>
+
   <div class="text"></div>
 
</div>
 
</div>
  
Line 140: Line 158:
 
   <span class="dot" onclick="currentSlide(2)"></span>  
 
   <span class="dot" onclick="currentSlide(2)"></span>  
 
   <span class="dot" onclick="currentSlide(3)"></span>  
 
   <span class="dot" onclick="currentSlide(3)"></span>  
−
   <span class="dot" onclick="currentSlide(3)"></span>  
+
   <span class="dot" onclick="currentSlide(4)"></span>  
 
</div>
 
</div>
  
Line 169: Line 187:
 
   slides[slideIndex-1].style.display = "block";   
 
   slides[slideIndex-1].style.display = "block";   
 
   dots[slideIndex-1].className += " active";
 
   dots[slideIndex-1].className += " active";
−
}
 
−
</script>
 
−
<script>
 
−
var slideIndex = 0;
 
−
showSlides();
 
−
 
−
function showSlides() {
 
−
    var i;
 
−
    var slides = document.getElementsByClassName("mySlides");
 
−
    var dots = document.getElementsByClassName("dot");
 
−
    for (i = 0; i < slides.length; i++) {
 
−
      slides[i].style.display = "none"; 
 
−
    }
 
−
    slideIndex++;
 
−
    if (slideIndex > slides.length) {slideIndex = 1}   
 
−
    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";
 
−
    setTimeout(showSlides, 15000); // Change image every 2 seconds
 
 
}
 
}
 
</script>
 
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 05:28, 15 October 2018

1 / 4
2 / 4
3 / 4
4 / 4