- Página Inicial
- Jquery
- Slideshow template
- Voltar
Slideshow template
Neste artigo vamos criar um slideshow com html, css e javascript, com efeito fadein.
Slideshow Templates Html Responsivo
Uma apresentação de slides para a web é uma sequência de imagens ou de texto que consiste em mostrar um elemento da sequência em um determinado intervalo de tempo.
O slider é um elemento visual muito comum em aplicações web, principalmente àquelas que exibem muitas imagens, possibilitando uma melhor experiência ao usuário.
Isso se tornou possível graças a biblioteca JavaScript e jQuery. O sistema trouxe diversas categorias como galeria de imagens, carrossel de imagens e slide pronto de promoções, ampliando assim as possibilidades e a agilidade do desenvolvimento.
Criando slideshow templates para usar
A aparência dos seus slides desempenha um papel crucial na criação de apresentações cativantes.
Além disso os slides visualmente atraentes não apenas tornam sua apresentação mais agradável de se ver, mas também ajudam a transmitir sua mensagem de forma mais eficaz.
Aqui estão algumas dicas para ESSE slide que vamos criar:
1. Use um design limpo e profissional. Evite slides com muitos elementos distrativos e opte por um design minimalista que coloque o foco no conteúdo principal.
2. Use imagens de alta qualidade que sejam relevantes para o conteúdo da sua apresentação. Imagens interessantes e atraentes podem ajudar a transmitir suas ideias de forma mais impactante.
3. Utilize espaços em branco para destacar elementos importantes nos seus slides. Isso ajudará a direcionar a atenção do público para as informações essenciais.
4. Ajuste seu slideshow para desktop e dispositivos móveis, a grande parte do seu publico de estar acessando sei site pelo celular cuide bem do Responsivo. Deixe 100% ajustável a qualquer tamanho de tela.
Vamos Adicionar o Html
<div class="slideshow-container"> <div class="slideshow fade"> <div class="numeracao">1 / 3</div> <img src="uploads/slide1.jpg" alt="slide"> <div class="legenda">Natureza e Animais</div> </div> <div class="slideshow fade"> <div class="numeracao">2 / 3</div> <img src="uploads/slide2.jpg" alt="Slide"> <div class="legenda">Cachoeira</div> </div> <div class="slideshow fade"> <div class="numeracao">3 / 3</div> <img src="uploads/slide3.jpg" alt="Slide"> <div class="legenda">Praia Paradisiaca</div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <div class="paginacao"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>
Vamos Adicionar o css
.slideshow-container { width: 100%; position: relative; margin: auto; } .slideshow { display: none; } .slideshow img { width:100%; } .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; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .legenda { width: auto; color: #fdfdfd; font-size: 0.9em; padding:5px; position: absolute; bottom: 18%; text-align: center; background-color: rgba(0, 0, 0, 0.4); left: 10%; } .numeracao { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .paginacao { width:100%; float:left; margin: 10px 0; text-align: center; } .dot { cursor: pointer; height: 13px; width: 13px; margin: 0 4px; border-radius: 50px; background-color: #007cff; display: inline-block; transition: background-color 0.6s ease; } .ativo, .dot:hover { background-color: #242424; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } @-webkit-keyframes fade { from { opacity: .4; } to { opacity: 1; } } @keyframes fade { from { opacity: .4; } to { opacity: 1; } } /*960PX BREAKPOINT - Ajustando o texto para desktop*/ @media (min-width:60em){ .legenda { font-size:2em; padding:8px; } .paginacao { margin:20px 0; } .dot { width:18px; height:18px; } }
Nesta última sessão vamos adicionar o javascript
<script type="text/javascript"> let slides = document.querySelectorAll('.slideshow'); let dots = document.querySelectorAll('.dot'); let slideIndex = 1; let timeoutID; const showSlides = (n) => { let i; if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < slides.length; i++) { dots[i].setAttribute('class', 'dot'); } slides[slideIndex - 1].style.display = 'block'; dots[slideIndex - 1].setAttribute('class', 'dot ativo'); clearTimeout(timeoutID); timeoutID = setTimeout(autoSlides, 4000); }; const plusSlides = (n) => { showSlides(slideIndex += n); }; const currentSlide = (n) => { showSlides(slideIndex = n); }; function autoSlides() { let i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } for (i = 0; i < slides.length; i++) { dots[i].setAttribute('class', 'dot'); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].setAttribute('class', 'dot ativo'); timeoutID = setTimeout(autoSlides, 4000); } autoSlides(); </script>
Slideshow template veja o Resultado!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
2.556 Visualizações
Deixe um comentário