Categorias
Design Programação Tutoriais

Slideshow com html, css, jQuery e sem nenhum plugin

Neste artigo vamos ver como criar facilmente um simples slideshow, usando apenas HTML, CSS e o jQuery. No final teremos um slideshow com vários efeitos, muito suave, autoPlay automático, entre muitas outras funcionalidades, muito simples mas muito atrativo e funcional…

Escolher a melhor apresentação de slides ou plugins jQuery de galeria pode ser um problema, devido a grande quantidade que podemos encontrar na Internet e principalmente ao peso que têm ao carregar a pagina. No entanto podemos contornar isso, criando o nosso próprio slideshow.

Alem de não perdemos tempo em pesquisas, podemos poupar também os recursos do nosso site. Com este simples código você poderá aproveitar e melhorar a apresentação das suas imagens em seu site. veja o a seguir o código que usamos.

Veja o video deste artigo:



O código HTML, CSS e JAVASCRIPT:

  • Clique para ver o HTML

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>SlideShow com jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />    
    </head>
    <body>

        <section id="galeria">
            <div class="conteudo">
                <ul id="imagens">
                    <li class="fade ativa">
                        <span class="numero">1 / 5</span>
                        <img src="imagens/1.jpg" alt="imagem 1" class="imagem-responsiva">
                        <span class="texto">Texto da imagem 1</span>
                    </li>
                    <li class="fade">
                        <span class="numero">2 / 5</span>
                        <img src="imagens/2.jpg" alt="imagem 2" class="imagem-responsiva">
                        <span class="texto">Texto da imagem 2</span>
                    </li>
                    <li class="fade">
                        <span class="numero">3 / 5</span>
                        <img src="imagens/3.jpg" alt="imagem 3" class="imagem-responsiva">
                        <span class="texto">Texto da imagem 3</span>
                    </li>
                    <li class="fade">
                        <span class="numero">4 / 5</span>
                        <img src="imagens/4.jpg" alt="imagem 4" class="imagem-responsiva">
                        <span class="texto">Texto da imagem 4</span>
                    </li>
                    <li class="fade">
                        <span class="numero">5 / 5</span>
                        <img src="imagens/5.jpg" alt="imagem 5" class="imagem-responsiva">
                        <span class="texto">Texto da imagem 5</span>
                    </li>
                </ul>
                <div id="botoes">
                    <a href="" id="seguinte">&#10095;</a>
                    <a href="" id="anterior">&#10094;</a>
                </div>
            </div>
            <div id="dots">
                <span class="dot ativo"></span>
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>

        </section>
        
        <script src="js/jquery.min.js"></script>
        <script src="js/main.js"></script>

    </body>
    </html>
  • Clique para ver o CSS

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 

    * { margin: 0; padding: 0; }
    * { box-sizing: border-box }
    body { font-family: 'Open Sans', Verdana, sans-serif; }

    #galeria {
        background-color: #fff;
        text-align: center;
    }

    .conteudo {
        background-color: #f5f5f5;
        max-width: 1170px;
        position: relative;
        margin: auto;
        overflow: hidden;
        z-index: 0;
    }

    .conteudo ul {
        margin: 0;
        padding: 0;
    }

    .conteudo ul li {
        display: none;
        list-style:none;
        position: relative;
        z-index: 1;
    }

    .conteudo ul li.active {
        display: block;
    }

    img { vertical-align: middle; }
    .imagem-responsiva{ width: 100%; height: auto;}

    .texto {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        background-color: rgba(0,0,0,0.4);
        bottom: 8px;
        left: 0;
        width: 100%;
        text-align: center;
    }
      
    .numero {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    #botoes {}

    /* Next & previous buttons */
    #anterior, #seguinte {
        cursor: pointer;
        text-decoration: none;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        background-color: rgba(0,0,0,0.8);
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 13px 13px 0;       
        z-index: 3;
    }

    #anterior {
        left: 0;
    }

    #seguinte {
        right: 0;
        border-radius: 13px 0 0 13px;
    }

    #anterior:hover, #seguinte:hover {
        background-color: rgba(0,0,0,0.4);
    }

    #dots { 
        display: block;
        clear: both;
        margin: auto;
        padding: 20px 0;
        text-align: center;
    }

    .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: rgba(0,0,0,0.4);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
        background-color: rgba(0,0,0,0.8);
    }

    /* Animations */
    .fade {-webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;}@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}@keyframes fade {from {opacity: .4} to {opacity: 1} }
    .fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}80%{transform:scale(0.9);opacity:1}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:0}60%{-webkit-transform:scale(1.1)}80%{-webkit-transform:scale(0.9);opacity:1}100%{-webkit-transform:scale(1);opacity:1}}
    .bigEntrance{animation-name:bigEntrance;-webkit-animation-name:bigEntrance;animation-duration:1.6s;-webkit-animation-duration:1.6s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;visibility:visible!important}@keyframes bigEntrance{0%{transform:scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity:.2}30%{transform:scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity:1}45%{transform:scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity:1}60%{transform:scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity:1}75%{transform:scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity:1}90%{transform:scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity:1}100%{transform:scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity:1}}@-webkit-keyframes bigEntrance{0%{-webkit-transform:scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity:.2}30%{-webkit-transform:scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity:1}45%{-webkit-transform:scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity:1}60%{-webkit-transform:scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity:1}75%{-webkit-transform:scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity:1}90%{-webkit-transform:scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity:1}100%{-webkit-transform:scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity:1}}

    @media only screen and (max-width: 300px) {
        .anterior, .seguinte, .texto {font-size: 11px;}
    }
  • Clique para ver o JAVASCRIPT

    $(window).on('load', function() {

        console.log('All assets are loaded')

        var imagens  = $("#imagens").children('li'),
            dot        = $("#dots").children('span'),
            numImagens = imagens.length,
            tempo      = 3500,
            rodar      = setInterval(autoPlay, tempo),
            i            = 0,
            a;

        function imagemSeguinte() {
            imagens.eq(i).removeClass('active');
            dot.eq(i).removeClass('active');
            i = ++i === numImagens ? 0 : i;
            imagens.eq(i).addClass('active');
            dot.eq(i).addClass('active');
        };
        
        function imagemAnterior() {
            imagens.eq(i).removeClass('active');
            dot.eq(i).removeClass('active');
            i = --i === -1 ? numImagens -1 : i;
            imagens.eq(i).addClass('active');
            dot.eq(i).addClass('active');
        };
        
        function mudarImagem( i, a ) {
            clearInterval(rodar);

            // remover
            imagens.eq(a).removeClass('active');
            dot.eq(a).removeClass('active');

            // adicionar
            imagens.eq(i).addClass('active');
            dot.eq(i).addClass('active');
            
            rodar = setInterval(autoPlay, tempo);       
        };
        
        $('.conteudo').hover(function(){
            $('#botoes').fadeIn(300);
            clearInterval(rodar);
        }, function(){
            $('#botoes').fadeOut(300);
            rodar = setInterval(autoPlay, tempo);
        });
        
        $('#anterior, #seguinte').on('click', function (e) {
            e.preventDefault();
            if( this.id === 'seguinte' ) {
                imagemSeguinte();
            } else {
                imagemAnterior();
            }
        });
        
        $('.dot').on('click', function (e) {
            e.preventDefault();

            i = $(this).index();
            a = $('#dots').children('span.active').index();

            mudarImagem( i, a );        
        });
        
        function autoPlay() {
            $('#seguinte').click();
        }

    }); 

Muito útil, não acha? Costuma usar jquery e criar os seus slideshows?



Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *