Como Adicionar um Slider Profissional em Seu Site

Atualmente vemos que muitos sites utilizam um slider principal em suas páginas. Afinal, a possibilidade de oferecer diversas opções em um mesmo campo, auxiliam na divulgação de diversas ofertas ao mesmo tempo sobretudo.

Caso você queira conhecer alguns dos principais tipos de slider, recomendo este artigo onde apresento diversos modelos diferentes que podem ser aplicados posteriormente.

Slider no WordPress

Caso você utilize o WordPress, temos alguns plugins que adicionam slides para o seu site. Neste artigo vou lhe mostrar alguns que atendem perfeitamente esse quesito.

Meta Slider

O Meta Slider certamente é um plugin fácil de administrar e adicionar um slider para o seu site.

Além de atender o básico, esse plugin em sua versão gratuita possui 2 tipos de efeito de transição de slides, ajuste de tamanho, tipo de navegação, opção de adicionar links ou textos, e além disso permite a possibilidade de configurar um SEO específico para cada imagem.

Para acessar o plugin clique aqui

Smart Slider 3

Esse plugin se caracteriza por ser bem mais completo que o Meta Slider em resumo.

Se você procura diversas opções de personalização para seu slider, recomendo com toda a certeza esse plugin. Nele você consegue definir primeiramente um template base e ir adicionando as imagens ao mesmo tempo.

Diversas possibilidades podem ser criadas, permitindo a edição de cores, setas de navegação, tags, textos, sombras e miniaturas.

Outro diferencial do plugin é a disponibilidade de um vídeo tutorial explicando o seu uso, facilitando acima de tudo o seu desenvolvimento com a ferramenta.

Para acessar o plugin clique aqui

Slider para o HTML

Caso você não utilize o WordPress, você também pode adicionar um slider no HTML do seu site similarmente.

Para isso, vamos utilizar o jQuery. Sendo uma biblioteca de funções em JavaScript, o jQuery foi criado para simplificar a codificação dos scripts para os navegadores.

Segundo o site Buil With, que monitora o que os principais sites da internet estão utilizando em sua estrutura, o jQuery como resultado é utilizado por mais de 70% dos 10 mil maiores sites do Brasil.

Você pode conferir essa estatística detalhadamente clicando aqui

Lembrando que você também pode criar um slider com Javascript puro caso já tenha conhecimento na linguagem de programação de fato.

Editor HTML

Caso não tenha nenhum editor de texto, é possível utilizar o bloco de notas do windows, porém para um trabalho profissional e melhor legibilidade recomendo os editores Sublime Text ou Notepad++(ambos são gratuitos).

Contudo, se já trabalha com qualquer outro editor pode utiliza-lo normalmente.

Como começar

Primeiramente vamos criar o HTML para o nosso slider. Para isso, vamos adicionar o código abaixo:

<div id="slider">
    <a href="#" class="control_next">&gt;</a>
    <a href="#" class="control_prev">&lt;</a>
    <ul>
        <li>
            <a href="#" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/webframe-sobre.jpg"/>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/ebook-8-passos-para-configurar-seo-seu-site.jpg"/>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2018/12/ux-design-ui-tendencias-2019.jpg"/>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/wordpress-artigo-webframe.jpg"/>
            </a>
        </li>
    </ul>
</div>

Nesta estrutura, temos primeiramente uma <div> com o conteúdo principal, ou seja, com o ID slider.

Logo abaixo temos os controles de navegação, onde nesse modelo vamos utilizar os símbolos > e < que representam respectivamente os elementos das setas igualmente ( < > ).

A tag (a href) é a area clicável. Não vamos adicionar nenhuma url aqui pois essa será a ação das setas onde trocaremos de imagem principalmente.

Finalmente temos uma lista de itens <ul> com cada slide. Aqui você poderá adicionar ou remover suas imagens normalmente alterando o valor (src=””) com o caminho para as suas imagens no seu servidor.

No exemplo coloquei algumas imagens aqui do WebFrame para exemplificar.

Nas tags <a href”#”> dentro das <li> devemos adicionar a url de destino para cada imagem. Caso não queira que o link abra em uma nova página, basta remover a tag [ target=”_blank” ]

Adicionando o jQuery

Agora que temos nosso HTML pronto, devemos adicionar a tag do jQuery posteriormente.

Para funcionar corretamente, é importante que você adicione o script principal da biblioteca na tag no <head></head> do seu site.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
<body>

<div id="slider">
    <a href="#" class="control_next">&gt;</a>
    <a href="#" class="control_prev">&lt;</a>
    <ul>
        <li>
            <a href="https://webframe.com.br" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/webframe-sobre.jpg"/>
            </a>
        </li>
        <li>
            <a href="https://webframe.com.br/8-passos-para-configurar-o-seo-do-site-ebook/" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/ebook-8-passos-para-configurar-seo-seu-site.jpg"/>
            </a>
        </li>
        <li>
            <a href="https://webframe.com.br/as-5-maiores-tendencias-em-ux-design-para-2019/" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2018/12/ux-design-ui-tendencias-2019.jpg"/>
            </a>
        </li>
        <li>
            <a href="https://webframe.com.br/criar-um-site-profissional-em-wordpress/" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/wordpress-artigo-webframe.jpg"/>
            </a>
        </li>
    </ul>
</div>

</body>
</html>

Essa tag irá proporcionar o carregamento da biblioteca do jQuery, fazendo com que sua estrutura de slider funcione sobretudo.

Adicionando a estrutura em jQuery

Com a biblioteca aplicada, vamos adicionar o código com as ações e funcionalidades do slider. Insira o cógido abaixo antes do fechamento da tag </body>

<script>
    $(function() {
    $('#checkbox').change(function () {
        setInterval(function () {
            moveRight();
        }, 3000);
    });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({
        width: slideWidth,
        height: slideHeight
    });

    $('#slider ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: -slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });
});
</script>

Aplicando o CSS

Agora nossa estrutura já está aplicada corretamente. Para finalizar os ajustes vamos adicionar o CSS do slider posteriormente.

Para esta etapa podemos adicionar de duas formas:

• CSS direto na página
• CSS com link externo

Nas boas práticas de web, o ideal é utilizar a segunda opção. Pois assim temos um código mais semântico e organizado, facilitando na hora da edição principalmente.

CSS direto na página

Para adicionar o CSS direto na página, devemos colocar todo o código <style></style> dentro da tag head. Nesse caso vamos inserir logo abaixo do nosso jQuery.

<html>
    <head>   
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
     html {
           border-top: 5px solid #fff;
           background: #f9f9f9;
           }
        #slider {
            position: relative;
            overflow: hidden;
            margin: 20px auto 0 auto;
            border-radius: 4px;
        }
        #slider ul {
            position: relative;
            margin: 0;
            padding: 0;
            height: 200px;
            list-style: none;
        }
        #slider ul li {
            position: relative;
            display: block;
            float: left;
            margin: 0;
            padding: 0;
            width: 1000px;
            height: 500px;
            background: #ccc;
            text-align: center;
            line-height: 300px;
        }
        a.control_prev, a.control_next {
            position: absolute;
            top: 40%;
            z-index: 999;
            display: block;
            padding: 4% 3%;
            width: auto;
            height: auto;
            background: #2a2a2a;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
            opacity: 0.8;
            cursor: pointer;
        }
        a.control_prev:hover, a.control_next:hover {
            opacity: 1;
            -webkit-transition: all 0.2s ease;
        }
        a.control_prev {
            border-radius: 0 2px 2px 0;
        }
        a.control_next {
            right: 0;
            border-radius: 2px 0 0 2px;
        }
        .slider_option {
            position: relative;
            margin: 10px auto;
            width: 160px;
            font-size: 18px;
        }
    </style>
   </head>

CSS Com Link Externo

Nesse caso vamos criar um link similar ao da biblioteca jQuery.

Em nosso exemplo vamos adicionar todo o CSS em um novo documento no editor e remover somente as tags <style></style>. Agora basta salvar o arquivo em .css que já teremos o arquivo pronto.

No exemplo adicionei o nome “slider.css” e coloquei na mesma pasta do nosso HTML.

Após esse processo, basta adicionar o código abaixo em nosso site com o link para o CSS no nosso servidor. Devemos inserir também dentro da tag <head></head> da mesma forma.

<link rel="stylesheet" type="text/css" href="slider.css">

Lembrando que sempre que alterar o local do CSS você deverá alterar esse link para o novo repositório.

Código Completo

Segue abaixo o código completo com o CSS na própria página.

<html>
    <head>   
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
         html {
        border-top: 5px solid #fff;
        background: #f9f9f9;
    }
    #slider {
        position: relative;
        overflow: hidden;
        margin: 20px auto 0 auto;
        border-radius: 4px;
    }
    #slider ul {
        position: relative;
        margin: 0;
        padding: 0;
        height: 200px;
        list-style: none;
    }
    #slider ul li {
        position: relative;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        width: 1000px;
        height: 500px;
        background: #ccc;
        text-align: center;
        line-height: 300px;
    }
    a.control_prev, a.control_next {
        position: absolute;
        top: 40%;
        z-index: 999;
        display: block;
        padding: 4% 3%;
        width: auto;
        height: auto;
        background: #2a2a2a;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 18px;
        opacity: 0.8;
        cursor: pointer;
    }
    a.control_prev:hover, a.control_next:hover {
        opacity: 1;
        -webkit-transition: all 0.2s ease;
    }
    a.control_prev {
        border-radius: 0 2px 2px 0;
    }
    a.control_next {
        right: 0;
        border-radius: 2px 0 0 2px;
    }
    .slider_option {
        position: relative;
        margin: 10px auto;
        width: 160px;
        font-size: 18px;
    }
    </style>
    
  </head>

<body>


<div id="slider">
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
        <li>
            <a href="https://webframe.com.br" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/webframe-sobre.jpg"/>
            </a>
        </li>
        <li>
            <a href="https://webframe.com.br/8-passos-para-configurar-o-seo-do-site-ebook/" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/ebook-8-passos-para-configurar-seo-seu-site.jpg"/>
            </a>
        </li>
        <li>
            <a href="https://webframe.com.br/as-5-maiores-tendencias-em-ux-design-para-2019/" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2018/12/ux-design-ui-tendencias-2019.jpg"/>
            </a>
        </li>
        <li>
            <a href="https://webframe.com.br/criar-um-site-profissional-em-wordpress/" target="_blank">
                <img src="https://webframe.com.br/wp-content/uploads/2019/01/wordpress-artigo-webframe.jpg"/>
            </a>
        </li>
    </ul>
</div>

<script>
    $(function() {
    $('#checkbox').change(function () {
        setInterval(function () {
            moveRight();
        }, 3000);
    });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({
        width: slideWidth,
        height: slideHeight
    });

    $('#slider ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: -slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });
});
</script>

</body>
</html>

Conclusão

Espero que você consiga implementar facilmente esse slider em seu site afinal. A biblioteca jQuery ainda é essencial nos dias de hoje, mesmo com diversas novas tecnologias e linguagens similarmente.

Caso você tenha mais interesse, recomendo pesquisar mais ainda sobre o assunto. Diversas são as possibilidades e plugins baseados em jQuery.

Muitas vezes queremos implementar a estrutura mais complexa, quando na verdade a simplicidade e agilidade na implementação é que fazem a diferença nos resultados certamente.

Deixe seu comentário e vamos em frente!

Grande Abraço

Yuri Zaban

Sou entusiasta em tecnologia, processos, ferramentas e tudo mais relacionado ao Design e Front End. Sou autor do WebFrame onde compartilho artigos sobre as principais inovações nesses temas.

Cookie	Duração	Descrição
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.