Difference between revisions of "Team:ITB Indonesia"
Arkairfani (Talk | contribs) |
Arkairfani (Talk | contribs) |
||
| Line 8: | Line 8: | ||
</style> | </style> | ||
</head> | </head> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| + | <style> | ||
| + | * {box-sizing:border-box} | ||
| + | body {font-family: Verdana,sans-serif;margin:0} | ||
| + | .mySlides {display:none} | ||
| − | + | /* Slideshow container */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
.slideshow-container { | .slideshow-container { | ||
max-width: 1000px; | max-width: 1000px; | ||
position: relative; | position: relative; | ||
margin: auto; | margin: auto; | ||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 56: | Line 27: | ||
top: 50%; | top: 50%; | ||
width: auto; | width: auto; | ||
| + | padding: 16px; | ||
margin-top: -22px; | margin-top: -22px; | ||
| − | |||
color: white; | color: white; | ||
font-weight: bold; | font-weight: bold; | ||
| Line 65: | Line 36: | ||
} | } | ||
| + | /* Position the "next button" to the right */ | ||
.next { | .next { | ||
right: 0; | right: 0; | ||
| Line 70: | Line 42: | ||
} | } | ||
| − | + | /* On hover, add a black background color with a little bit see-through */ | |
.prev:hover, .next:hover { | .prev:hover, .next:hover { | ||
background-color: rgba(0,0,0,0.8); | background-color: rgba(0,0,0,0.8); | ||
} | } | ||
| − | + | /* Caption text */ | |
.text { | .text { | ||
color: #f2f2f2; | color: #f2f2f2; | ||
| Line 86: | Line 58: | ||
} | } | ||
| − | + | /* Number text (1/3 etc) */ | |
.numbertext { | .numbertext { | ||
color: #f2f2f2; | color: #f2f2f2; | ||
| Line 95: | Line 67: | ||
} | } | ||
| − | + | /* The dots/bullets/indicators */ | |
.dot { | .dot { | ||
cursor:pointer; | cursor:pointer; | ||
| Line 111: | Line 83: | ||
} | } | ||
| − | + | /* Fading animation */ | |
.fade { | .fade { | ||
-webkit-animation-name: fade; | -webkit-animation-name: fade; | ||
| Line 129: | Line 101: | ||
} | } | ||
| + | /* On smaller screens, decrease text size */ | ||
| + | @media only screen and (max-width: 300px) { | ||
| + | .prev, .next,.text {font-size: 11px} | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | <div class="slideshow-container"> | ||
| + | |||
| + | <div class="mySlides fade"> | ||
| + | <div class="numbertext">1 / 3</div> | ||
| + | <img src="img_nature_wide.jpg" style="width:100%"> | ||
| + | <div class="text">Caption Text</div> | ||
| + | </div> | ||
| + | |||
| + | <div class="mySlides fade"> | ||
| + | <div class="numbertext">2 / 3</div> | ||
| + | <img src="img_fjords_wide.jpg" style="width:100%"> | ||
| + | <div class="text">Caption Two</div> | ||
| + | </div> | ||
| + | |||
| + | <div class="mySlides fade"> | ||
| + | <div class="numbertext">3 / 3</div> | ||
| + | <img src="img_mountains_wide.jpg" style="width:100%"> | ||
| + | <div class="text">Caption Three</div> | ||
| + | </div> | ||
| + | |||
| + | <a class="prev" onclick="plusSlides(-1)">❮</a> | ||
| + | <a class="next" onclick="plusSlides(1)">❯</a> | ||
| + | |||
| + | </div> | ||
| + | <br> | ||
| + | |||
| + | <div style="text-align:center"> | ||
| + | <span class="dot" onclick="currentSlide(1)"></span> | ||
| + | <span class="dot" onclick="currentSlide(2)"></span> | ||
| + | <span class="dot" onclick="currentSlide(3)"></span> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
var slideIndex = 1; | var slideIndex = 1; | ||
showSlides(slideIndex); | showSlides(slideIndex); | ||
| Line 144: | Line 157: | ||
var slides = document.getElementsByClassName("mySlides"); | var slides = document.getElementsByClassName("mySlides"); | ||
var dots = document.getElementsByClassName("dot"); | var dots = document.getElementsByClassName("dot"); | ||
| − | if (n > slides.length) {slideIndex = 1} | + | if (n > slides.length) {slideIndex = 1} |
if (n < 1) {slideIndex = slides.length} | if (n < 1) {slideIndex = slides.length} | ||
for (i = 0; i < slides.length; i++) { | for (i = 0; i < slides.length; i++) { | ||
| − | slides[i].style.display = "none"; | + | slides[i].style.display = "none"; |
} | } | ||
for (i = 0; i < dots.length; i++) { | for (i = 0; i < dots.length; i++) { | ||
dots[i].className = dots[i].className.replace(" active", ""); | dots[i].className = dots[i].className.replace(" active", ""); | ||
} | } | ||
| − | slides[slideIndex-1].style.display = "block"; | + | slides[slideIndex-1].style.display = "block"; |
dots[slideIndex-1].className += " active"; | dots[slideIndex-1].className += " active"; | ||
} | } | ||
| − | + | </script> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</html> | </html> | ||
Revision as of 11:25, 27 June 2017
