![](https://static.igem.org/mediawiki/2017/9/93/Artico_mdworkflow.png)
![](https://static.igem.org/mediawiki/2017/c/c5/Artico_p5wt_polar.png)
(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)">❮</button> | ||
+ | <button class="btn-right" onclick="plusDivs(1)">❯</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}} |