Criando um Slide Simples com jQuery

Nesse tutorial vamos trabalhar criando um Slide Simples com jQuery, tendo um efeito de fade, e sem plugin.

A ideia basicamente é trabalhar com uma classe que será adicionada no elemento que será exibido, e com isso iremos mostrar imagem a imagem.

Criando um Slide Simples com jQuery

Vamos agora criar o nosso HTML

 <ul id="slider">
            <li class="sliderActive"><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
        </ul>

Temos uma lista não ordenada, com a imagens que serão exibidas. E no primeiro item, temos a classe sliderActive, pra informa que é imagem que será exibida.

Agora vamos adicionar agora o CSS:

Definremos a configuração do #slider, fazendo as limitações de espaço, e removendo os bullets:

#slider{
    list-style:none;
    width:500px;
    height:200px;
    margin:0 auto;
    padding:0;
    overflow: hidden;
    position: relative;
}

  • Remove o bullet da lista não ordernada;
  • Define largura (width) e altura(height)
  • Remove a margem, e centralizada na horizontal
  • Remove o padding
  • Oculta o que ultrapassar o que foi definido na largura e altura
  • Define uma position:relative

Definiremos a configuração dos itens do slide:

#slider li{
   position: absolute;
   z-index: 0;
   display:none;
}

  • Define um position:absolute
  • Define z-index como 0, para elemento ative sobreponha
  • Oculta todos os elementos

Configuraremos o elemento ativo, que será exibido:

#slider li.sliderActive{
    z-index: 1;
}

  • Definimos o z-index:1, para sobrepor os outros elementos

Agora vamos configurar o javascript:

Criamos uma função que fará praticamento todo efeito:

<br />
 function simpleSlider(){<br />
        var sliderActive = $(&quot;#slider .sliderActive&quot;);<br />
        var sliderNext   = sliderActive.next().length ? sliderActive.next() : $(&quot;#slider li:first&quot;);<br />
            sliderNext.addClass('sliderActive').fadeIn();<br />
            sliderActive.removeClass('sliderActive').fadeOut();<br />
 }<br />

Configuraremos agora, o tempo que será exibido cada imagem, usando setInterval, e por padrão, mostraremos o primeiro elemento, com efeito fadeIn:

<br />
 $(function(){<br />
     $(&quot;#slider li:first&quot;).fadeIn();<br />
       setInterval( &quot;simpleSlider()&quot;, 3000 );<br />
   });<br />

  • Definimos que iremos mostrar a primeira imagem, usando fadeIn
  • Usamos o setInterval, pra executar a função em um intervalo de tempo, no qual definimos que executará a função simpleSlider(), que criamos, a cada 3 segundos

iremos ver todo o código, como ficou:

<!DOCTYPE html>
<html>
    <head>
        <title>Slide Simples com jQuery</title>
        <meta charset="UTF-8">
        <style type="text/css">
           #slider{
                list-style:none;
                width:500px;
                height:200px;
                margin:0 auto;
                padding:0;
                overflow: hidden;
                position: relative;
            }

            #slider li{
               position: absolute;
               z-index: 0;
               display:none;
            }

            #slider li.sliderActive{
                z-index: 1;
            }
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            function simpleSlider(){

                    var sliderActive = $("#slider .sliderActive");
                    var sliderNext   = sliderActive.next().length ? sliderActive.next() : $("#slider li:first");
                    sliderNext.addClass('sliderActive').fadeIn();
                    sliderActive.removeClass('sliderActive').fadeOut();
                }
            $(function(){
                $("#slider li:first").fadeIn();
                setInterval( "simpleSlider()", 3000 );
            });
        </script>

    </head>
    <body>
        <ul id="slider">
            <li class="sliderActive"><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
        </ul>
    </body>
</html>

Para ver o slide funcionando clique aqui

Espero que tenham gostado, e ajudado. Até a próxima.

2 thoughts on “Criando um Slide Simples com jQuery

  1. mt bom!!!!! só me perdi na hora na função simpleSlider… poderia detalhar como funciona cada coisa? tipo ? : enfim… tudo isso aqui ó:

    function simpleSlider(){
    var sliderActive = $(“#slider .sliderActive”);
    var sliderNext = sliderActive.next().length ? sliderActive.next() : $(“#slider li:first”);
    sliderNext.addClass(‘sliderActive’).fadeIn();
    sliderActive.removeClass(‘sliderActive’).fadeOut();
    }

    abrass

    1. Ricardo, seria basicamente isso :

      function simpleSlider(){
      //Resgatar com classe sliderActive
      var sliderActive = $(“#slider .sliderActive”);
      //Verifica se existe um proximo elemento, se existir vai para proximo elemento, senão volta ao primeiro
      var sliderNext = sliderActive.next().length ? sliderActive.next() : $(“#slider li:first”);
      //Adiciona a classe slideActive pra proximo elemento , para exibi-lo
      sliderNext.addClass(‘sliderActive’).fadeIn();
      //Remove a classe SlideActive do elemento atual, pra mostrar o proximo
      sliderActive.removeClass(‘sliderActive’).fadeOut();
      }
      

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *