44 lines
1.2 KiB
HTML
44 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- create your markup and styles -->
|
|
|
|
<button class="arrow">⇦</button>
|
|
<button class="arrow">⇨</button>
|
|
|
|
|
|
<ul>
|
|
<li><img src="https://en.js.cx/carousel/1.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/2.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/3.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/4.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/5.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/6.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/7.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/8.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/9.png"></li>
|
|
<li><img src="https://en.js.cx/carousel/10.png"></li>
|
|
</ul>
|
|
|
|
|
|
<script>
|
|
// label the images to visually track them, just for convenience,
|
|
// this code can be removed
|
|
let i = 1;
|
|
for(let li of carousel.querySelectorAll('li')) {
|
|
li.style.position = 'relative';
|
|
li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
|
|
i++;
|
|
}
|
|
|
|
// ...your code to make carousel alive!
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|