Skip to content

Instantly share code, notes, and snippets.

@MoisesTedeschi

MoisesTedeschi/slide.html

Created July 12, 2022 01:44
Show Gist options
  • Save MoisesTedeschi/310baa2b184e3e90f379f2dc0a041b5f to your computer and use it in GitHub Desktop.
Save MoisesTedeschi/310baa2b184e3e90f379f2dc0a041b5f to your computer and use it in GitHub Desktop.
Download ZIP
Slide simples com JS puro - Util.
Raw
slide.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{ position: relative; height:500px; }
.container img{ position: absolute; left:0; top:0; width:100%; max-height: 600px; opacity: 0; transition:1s; object-fit: cover; z-index: -1; }
.bullets{ text-align: center; z-index: 1; }
.bullet-single{ margin:0 8px; cursor: pointer; display: inline-block; width:20px; height:20px; border-radius:10px; background-color: #ccc; }
.active-bullet{ background-color:#333; }
</style>
</head>
<body>
<div class="container">
<img style="opacity:1;" src="https://picsum.photos/id/237/300/200" />
<img src="https://picsum.photos/id/238/300/200" />
<img src="https://picsum.photos/id/239/300/200" />
</div>
<div class="bullets">
<div class="bullet-single active-bullet"></div>
<div class="bullet-single"></div>
<div class="bullet-single"></div>
</div>
<script>
var lastIndex = 0;
var images = document.querySelectorAll('.container img');
images.forEach((item, index)=> {
document.querySelectorAll('.bullet-single')[index].addEventListener('click', ()=> {
let lastImage = document.querySelectorAll('.container img')[lastIndex];
let actualImage = document.querySelectorAll('.container img')[index];
document.querySelectorAll('.bullet-single')[lastIndex].classList.remove('active-bullet');
document.querySelectorAll('.bullet-single')[index].classList.add('active-bullet');
lastImage.style.opacity = 0;
actualImage.style.opacity = 1;
lastIndex = index;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment