Slide pronto para editar

Slide pronto para editar

O que é slideshow ?

É uma sequencia imagens comum que mostra cada conteúdo através das setas e marcadores, contando com efeitos de transição nas figuras além da legenda na parte inferior de cada imagem.

O slider é um elemento visual muito comum em aplicações em páginas web, principalmente àquelas que exibem muitas imagens, possibilitando uma melhor experiência ao usuário.

Entretanto, a utilização massiva de JavaScript pode prejudicar o desempenho do website, especialmente em dispositivos móveis. Assim, sempre que possível, uma ótima opção é aproveitar os recursos do CSS3 para a criação de elementos visuais sem a necessidade de JavaScript.

Portanto, neste tutorial vamos criar um slide simples porém bem funcional com html e css sem uso de scripts.

Nesta seção, projetaremos uma estrutura simples na tag <div>,<input>, <label>. 

Essas são as tags que usaremos para criar o nosso Slideshow com Css.

Vamos Adicionar o HTML

        <!--Slide-->
        <div class="slide-css">

            <input class="input-slide" type="radio" id="trigger1" name="slider" checked autofocus>
            <label class="label-slide" for="trigger1">
            </label>
            <div class="slide background-1"></div>

            <input class="input-slide" type="radio" id="trigger2" name="slider">
            <label class="label-slide" for="trigger2">
            </label>
            <div class="slide background-2"></div>

            <input class="input-slide" type="radio" id="trigger3" name="slider">
            <label class="label-slide" for="trigger3">

            </label>

            <div class="slide background-3"></div>

            <input class="input-slide" type="radio" id="trigger4" name="slider">
            <label class="label-slide" for="trigger4">


            </label>
            <div class="slide background-4"></div>

            <input class="input-slide" type="radio" id="trigger5" name="slider">
            <label class="label-slide" for="trigger5">


            </label>
            <div class="slide background-5"></div>
        
        </div>
        <!--Slide-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades  CSS para estilizar o nosso Slide.

.slide-css { width: 100%; float: left; position: sticky; overflow: hidden; }

.sr-only {
  position: absolute;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: transparent;
}

.input-slide {

  position: absolute;  
  opacity: 0;
  cursor: pointer;

}

.label-slide {
  
    display: inline-block;
    width: 15px;
    height: 15px;
    border: solid 2px #ffffff;
    border-radius: 999px;
    background-color: transparent;
    margin: 70px 5px 5px 5px;
    z-index: 2;
    cursor: pointer;
    transition-duration: .4s;
    box-shadow: 0 0 20px 0 #000;
    left: 30%;
    position: relative;

}

.input-slide:checked + .label-slide{
  background-color: #007cff;
}


.input-slide:focus + .label-slide{
  box-shadow: 0 0 0 2px teal, 0 0 18px #ffffff;
}

.slide {

  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateX(-100%);
  transition-duration: .6s;
  opacity: 1;

}

.input-slide:checked ~ .slide {
  transform: translateX(100%);
}

.input-slide:checked + .label-slide + .slide {
  transform: translateX(0);
  opacity: 1;
}

.background-1 { background-image: url(../uploads/slide1.jpg); }
.background-2 { background-image: url(../uploads/slide2.jpg); }
.background-3 { background-image: url(../uploads/slide3.jpg); }
.background-4 { background-image: url(../uploads/slide4.jpg); }
.background-5 { background-image: url(../uploads/slide5.jpg); }


/*480PX BREAKPOINT*/
@media (min-width:30em){

    .label-slide {
    
        margin: 130px 5px 5px 5px;
        left: 39%; 
    
    }

}

/*600PX BREAKPOINT*/
@media (min-width:37em){

    .label-slide {
    
        margin: 180px 5px 5px 5px;
        left: 43%; 
    
    }

} 

/*768PX BREAKPOINT*/
@media (min-width:48em){

    .label-slide {
    
        margin: 230px 5px 5px 5px;
        left: 43%; 
    
    }

} 

/*960PX BREAKPOINT*/
@media (min-width:60em){

    .label-slide {
    
        margin: 265px 5px 15px 5px;
        left: 46%;
    
    }

}

/*1280PX BREAKPOINT*/
@media (min-width:80em){

    .label-slide {
    
        margin: 450px 5px 15px 5px;
        left: 47%;
    
    }
 
}

/*1366PX BREAKPOINT*/
@media (min-width:85em){

    .label-slide {
    
        margin: 480px 5px 15px 5px;
        left: 47%;
    
    }

}

/*1920PX BREAKPOINT*/
@media (min-width:120em){

    .label-slide {
    
        margin: 520px 5px 15px 5px;
        left: 49%;
    
    }
}

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Slide pronto para editar!

Veja o Resultado baixo!

Baixar Código Veja Funcionando