Difference between revisions of "Team:Cologne-Duesseldorf/Test2"

(Replaced content with "{{Template:Cologne-Duesseldorf/css}} {{Template:Cologne-Duesseldorf/header}} <html> <body> <div id="ToC"></div> <article> </article> </body> </html> {{Template:Cologne-...")
Line 2: Line 2:
 
{{Template:Cologne-Duesseldorf/header}}
 
{{Template:Cologne-Duesseldorf/header}}
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
.slider{
 +
  border:5px solid black;
 +
  position:relative;
 +
}
 +
.slide{
 +
  display:block;
 +
  max-width:50%;
 +
  padding: 10%;
 +
  margin:auto;
 +
}
 +
.slider button { 
 +
  position: absolute; 
 +
  top: 50%;
 +
  border:none;
 +
  height: 50px;
 +
  width: 50px;
 +
  cursor: pointer;
 +
  margin-top: -25px; 
 +
  background: hsl(0, 0%, 90%); 
 +
}
 +
.slider button:hover{
 +
  background: hsl(0, 0%, 70%);
 +
}
 +
 +
.btn-left{
 +
  left:0;
 +
}
 +
.btn-right{
 +
  right:0;
 +
}
 +
 +
</style>
 +
</head>
 
<body>
 
<body>
 
<div id="ToC"></div>
 
<div id="ToC"></div>
 
<article>
 
<article>
 +
 +
<div class="slider">
 +
  <img class="slide" src="https://static.igem.org/mediawiki/2017/9/93/Artico_mdworkflow.png" style="width:100%">
 +
  <img class="slide" src="https://static.igem.org/mediawiki/2017/c/c5/Artico_p5wt_polar.png" style="width:100%">
 +
 +
  <button class="btn-left" onclick="plusDivs(-1)">&#10094;</button>
 +
  <button class="btn-right" onclick="plusDivs(1)">&#10095;</button>
 +
</div>
  
 
   </article>
 
   </article>
 
</body>
 
</body>
 +
 +
<script>
 +
var slideIndex = 1;
 +
showDivs(slideIndex);
 +
 +
function plusDivs(n) {
 +
  showDivs(slideIndex += n);
 +
}
 +
 +
function showDivs(n) {
 +
  var i;
 +
  var x = document.getElementsByClassName("slide");
 +
  if (n > x.length) {slideIndex = 1}   
 +
  if (n < 1) {slideIndex = x.length}
 +
  for (i = 0; i < x.length; i++) {
 +
    x[i].style.display = "none"; 
 +
  }
 +
  x[slideIndex-1].style.display = "block"; 
 +
}
 +
</script>
 
</html>
 
</html>
 
{{Template:Cologne-Duesseldorf/footer}}
 
{{Template:Cologne-Duesseldorf/footer}}
 
{{Template:Cologne-Duesseldorf/js}}
 
{{Template:Cologne-Duesseldorf/js}}

Revision as of 13:03, 30 October 2017