Olá pessoal! Hoje, vamos aprender como criar um incrível slider de imagens usando HTML, CSS e JavaScript. Um slider é uma ótima maneira de exibir várias imagens em um espaço limitado, permitindo que você destaque diferentes conteúdos de forma interativa e visualmente atraente. Vamos começar!
Passo 1: Configuração básica
Antes de começarmos, certifique-se de ter uma estrutura básica HTML configurada:
<div class="slider">
<div class="slides">
<div class="slide">
<img src="imagem1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="imagem2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="imagem3.jpg" alt="Image 3">
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dots">
<div class="dot active" onclick="currentSlide(1)">
<img src="imagem1.jpg" alt="Image 1">
</div>
<div class="dot" onclick="currentSlide(2)">
<img src="imagem2.jpg" alt="Image 2">
</div>
<div class="dot" onclick="currentSlide(3)">
<img src="imagem3.jpg" alt="Image 3">
</div>
</div>
</div>
Passo 2: Estilização CSS
Vamos criar o arquivo styles.css e estilizar o slider:
.slider {
position: relative;
width: 100%;
aspect-ratio: 1/0.56;
margin: 0 auto;
}
.slides {
position: relative;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
opacity: 0;
/* SE QUISER UMA TRANSIÇÃO SEM O FADE, REMOVA ESSAS LINHAS ABAIXO */
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.8);
}
.prev {
left: 1px;
}
.next {
right: 1px;
}
.dots {
position: relative;
display: flex;
justify-content: center;
margin-top: -80px;
padding: 0 10px;
}
.dot {
display: inline-block;
cursor: pointer;
margin: 0 5px;
border: 1px solid transparent;
}
.dot img {
width: 100px;
height: 60px;
object-fit: cover;
display: block;
}
.dot:hover {
opacity: 0.5;
}
.active, .active:hover {
border: 1px solid #fff;
opacity: 1;
}
Passo 3: Implementando o JavaScript
Agora, vamos criar o arquivo script.js e adicionar o JavaScript para tornar o slider funcional:
letslideIndex=1;
showSlides(slideIndex);
functionplusSlides(n) {
showSlides(slideIndex+=n);
}
functioncurrentSlide(n) {
showSlides(slideIndex=n);
}
functionshowSlides(n) {
letslides=document.getElementsByClassName("slide");
letdots=document.getElementsByClassName("dot");
if (n>slides.length) {slideIndex=1}
if (n<1) {slideIndex=slides.length}
for (leti=0; i<slides.length; i++) {
slides[i].style.opacity="0";
slides[i].className=slides[i].className.replace(" active", "");
}
for (leti=0; i<dots.length; i++) {
dots[i].className=dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.opacity="1";
slides[slideIndex-1].className+=" active";
dots[slideIndex-1].className+=" active";
}
Espero que esse tutorial tenha sido útil para você criar um slider de imagens personalizado com HTML, CSS e JavaScript.
Divirta-se criando sliders incríveis para seus projetos! 🚀