Slideshow html css responsivo

Slideshow Pronto html css responsivo

Neste tutorial veja como criar um slideshow com Html e css javascript.

Nesta seção, projetaremos as estruturas com as tags abaixo. 

Usaremos A Tag <section>, <div>, <img> e a tag <i> para inserirmos os icones de setas.

Essas tags usaremos para criar o nosso Slideshow html css responsivo html css e javascript.

    <section class="slider">

      <div class="seta arrow-left"><i class="fas fa-chevron-circle-left"></i></div>

        <img src="uploads/slide-1.jpg" alt="slide-1.jpg">
        <img src="uploads/slide-2.jpg" alt="slide-2.jpg">
        <img src="uploads/slide-3.jpg" alt="slide-3.jpg">
        <img src="uploads/slide-4.jpg" alt="slide-4.jpg">

      <div class="seta arrow-right"><i class="fas fa-chevron-circle-right"></i></div>

      <div class="paginacao">
    
        <div class="botao"> <i class="far fa-circle"></i> </div>
        <div class="botao"> <i class="far fa-circle"></i> </div>
        <div class="botao"> <i class="far fa-circle"></i> </div>
        <div class="botao"> <i class="far fa-circle"></i> </div>
    
      </div>
    
    </section><!--slider-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso slideshow css html e javascript.

.slider {

  width: 100%;
  height: 100%;
  position: relative;
  background: #242424;
  overflow: hidden;

}

.slider img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  animation: fade 1s;

}

.slider .seta {

  z-index: 10;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: auto;
  right: auto;
  width: auto;
  height: 1.5rem;
  font-size: 2.5em;
  color: cornsilk;
  opacity: 0.5;
  transition: opacity 1s;

}

.slider .seta:hover {

  cursor: pointer;
  opacity: 1;

}

.slider .arrow-left {

  left: 2%;

}

.slider .arrow-right {

  right: 2%;

}

.slider .paginacao {

  position: absolute;
  margin: auto;
  top: auto;
  bottom: 2%;
  left: 0;
  right: 0;
  width: 7rem;
  height: auto;
  z-index: 5;

}

.slider .paginacao .botao {

	width: auto;
	height: auto;
	display: inline-flex;
	align-content: center;
	justify-content: center;
	color: #fff;

}

@keyframes fade {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}

Vamos Adicionar o Script

<script>

const imgs = document.querySelectorAll(".slider img");
const dots = document.querySelectorAll(".botao i");
const leftArrow = document.querySelector(".arrow-left");
const rightArrow = document.querySelector(".arrow-right");

let currentIndex = 0;
let time = 7000; //Tempo padrão para apresentação de slides automática

const defClass = (startPos, index) => {
  for (let i = startPos; i < imgs.length; i++) {
    imgs[i].style.display = "none";
    dots[i].classList.remove("fa-dot-circle");
    dots[i].classList.add("fa-circle");
  }
  imgs[index].style.display = "block";
  dots[index].classList.add("fa-dot-circle");
};

defClass(1, 0);

leftArrow.addEventListener("click", function(){
  currentIndex <= 0 ? currentIndex = imgs.length-1 : currentIndex--;
  defClass(0, currentIndex);
});

rightArrow.addEventListener("click", function(){
  currentIndex >= imgs.length-1 ? currentIndex = 0 : currentIndex++;
  defClass(0, currentIndex);
});

const startAutoSlide = () => {
  setInterval(() => {
    currentIndex >= imgs.length-1 ? currentIndex = 0 : currentIndex++;
    defClass(0, currentIndex);
  }, time);
};

startAutoSlide(); //Inicia o slideshow

</script>

Combinando as Três seções acima Html Css e javascripttemos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando