Line 115: | Line 115: | ||
} | } | ||
+ | /* Fading animation */ | ||
+ | .fade { | ||
+ | -webkit-animation-name: fade; | ||
+ | -webkit-animation-duration: 1.5s; | ||
+ | animation-name: fade; | ||
+ | animation-duration: 1.5s; | ||
+ | } | ||
+ | .mySlides2 { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* Next & previous buttons */ | ||
+ | .prev, .next { | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: auto; | ||
+ | margin-top: -22px; | ||
+ | padding: 16px; | ||
+ | color: white; | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | transition: 0.6s ease; | ||
+ | border-radius: 0 3px 3px 0; | ||
+ | user-select: none; | ||
+ | } | ||
+ | |||
+ | /* Position the "next button" to the right */ | ||
+ | .next { | ||
+ | right: 0; | ||
+ | border-radius: 3px 0 0 3px; | ||
+ | } | ||
+ | |||
+ | /* On hover, add a black background color with a little bit see-through */ | ||
+ | .prev:hover, .next:hover { | ||
+ | background-color: rgba(0,0,0,0.8); | ||
+ | } | ||
+ | |||
+ | .text { | ||
+ | color: #f2f2f2; | ||
+ | font-size: 15px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | bottom: 8px; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
</style> | </style> | ||
Line 162: | Line 209: | ||
<div class="mySlides"> | <div class="mySlides"> | ||
+ | |||
+ | |||
+ | <!-- Slideshow container --> | ||
+ | <div class="slideshow-container"> | ||
+ | |||
+ | <!-- Full-width images with number and caption text --> | ||
+ | <div class="mySlides2 fade"> | ||
+ | <div class="numbertext">1 / 3</div> | ||
+ | <img src="img1.jpg" style="width:100%"> | ||
+ | <div class="text">Caption Text</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="mySlides2 fade"> | ||
+ | <div class="numbertext">2 / 3</div> | ||
+ | <img src="img2.jpg" style="width:100%"> | ||
+ | <div class="text">Caption Two</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="mySlides2 fade"> | ||
+ | <div class="numbertext">3 / 3</div> | ||
+ | <img src="img3.jpg" style="width:100%"> | ||
+ | <div class="text">Caption Three</div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Next and previous buttons --> | ||
+ | <a class="prev" onclick="plusSlides(-1)">❮</a> | ||
+ | <a class="next" onclick="plusSlides(1)">❯</a> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
Line 171: | Line 253: | ||
showSlides(slideIndex); | showSlides(slideIndex); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
function currentSlide(n) { | function currentSlide(n) { | ||
Line 203: | Line 278: | ||
+ | var slideIndex2 = 1; | ||
+ | showSlides2(slideIndex2); | ||
− | function | + | |
+ | function plusSlides(n) { | ||
+ | showSlides2(slideIndex2 = n); | ||
+ | } | ||
+ | |||
+ | function showSlides2(n) { | ||
var i; | var i; | ||
− | var slides = document.getElementsByClassName(" | + | var slides = document.getElementsByClassName("mySlides2"); |
− | if (n > slides.length) { | + | if (n > slides.length) {slideIndex2 = 1} |
− | if (n < 1) { | + | if (n < 1) {slideIndex2 = 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"; | ||
} | } | ||
− | slides[ | + | slides[slideIndex2-1].style.display = "block"; |
+ | |||
} | } | ||
+ | |||
+ | |||
+ | |||
</script> | </script> | ||
Revision as of 21:16, 17 October 2019