Line 4: | Line 4: | ||
<head> | <head> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
− | <link | + | |
+ | <link href="style.css" type="text/css" rel="stylesheet"> | ||
<style> | <style> | ||
Line 77: | Line 78: | ||
</div> | </div> | ||
+ | <div class="w3-content" style="max-width:800px"> | ||
+ | <img class="mySlides" src="https://static.igem.org/mediawiki/2017/5/50/CuhkDIYBiosharing.PNG" style="width:100%"> | ||
+ | <img class="mySlides" src="https://static.igem.org/mediawiki/2017/d/dd/Cuhktaiwantrip.PNG" style="width:100%"> | ||
+ | <img class="mySlides" src="https://static.igem.org/mediawiki/2017/5/50/CuhkDIYBiosharing.PNG" style="width:100%"> | ||
+ | </div> | ||
+ | |||
+ | <div class="w3-center"> | ||
+ | <div class="w3-section"> | ||
+ | <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> | ||
+ | <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button> | ||
+ | </div> | ||
+ | <button class="w3-button demo" onclick="currentDiv(1)">1</button> | ||
+ | <button class="w3-button demo" onclick="currentDiv(2)">2</button> | ||
+ | <button class="w3-button demo" onclick="currentDiv(3)">3</button> | ||
+ | </div> | ||
+ | <script> | ||
+ | var slideIndex = 1; | ||
+ | showDivs(slideIndex); | ||
+ | |||
+ | function plusDivs(n) { | ||
+ | showDivs(slideIndex += n); | ||
+ | } | ||
+ | |||
+ | function currentDiv(n) { | ||
+ | showDivs(slideIndex = n); | ||
+ | } | ||
+ | |||
+ | function showDivs(n) { | ||
+ | var i; | ||
+ | var x = document.getElementsByClassName("mySlides"); | ||
+ | var dots = document.getElementsByClassName("demo"); | ||
+ | if (n > x.length) {slideIndex = 1} | ||
+ | if (n < 1) {slideIndex = x.length} | ||
+ | for (i = 0; i < x.length; i++) { | ||
+ | x[i].style.display = "none"; | ||
+ | } | ||
+ | for (i = 0; i < dots.length; i++) { | ||
+ | dots[i].className = dots[i].className.replace(" w3-red", ""); | ||
+ | } | ||
+ | x[slideIndex-1].style.display = "block"; | ||
+ | dots[slideIndex-1].className += " w3-red"; | ||
+ | } | ||
+ | </script> | ||
<br> | <br> | ||
<p> | <p> |
Revision as of 09:34, 3 October 2017