51 lines
2.3 KiB
HTML
51 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>steev CSS</title>
|
|
<link rel="stylesheet" type="text/css" href="../steev.css">
|
|
</head>
|
|
<body>
|
|
<br>
|
|
<h1 style="text-align: center;">Grids</h1>
|
|
<div class="container">
|
|
<!-- Slideshow Container-->
|
|
<div class="slideshow-container">
|
|
|
|
<!-- a slide -->
|
|
<div class="mySlides fade">
|
|
<div class="numbertext">1 / 3</div>
|
|
<img src="https://www.exclusive-networks.com/de/wp-content/uploads/sites/10/2019/06/test-image.jpg" style="width:100%">
|
|
<div class="text">Caption Text</div>
|
|
</div>
|
|
<!-- slide end -->
|
|
|
|
<div class="mySlides fade">
|
|
<div class="numbertext">2 / 3</div>
|
|
<img src="https://wow.olympus.eu/webfile/img/1632/oly_testwow_stage.jpg?x=1024" style="width:100%">
|
|
<div class="text">Caption Two</div>
|
|
</div>
|
|
|
|
<div class="mySlides fade">
|
|
<div class="numbertext">3 / 3</div>
|
|
<img src="https://knowpathology.com.au/app/uploads/2018/07/Happy-Test-Screen-01.png" 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>
|
|
</div>
|
|
<p style="text-align: center;">This yet only works once per html site</p>
|
|
<script src="../steevcss.js"></script>
|
|
</body>
|
|
</html> |