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

[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>
[/html]

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:

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

  • 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:

[css]
#slider li{
position: absolute;
z-index: 0;
display:none;
}
[/css]

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

Configuraremos o elemento ativo, que será exibido:

[css]
#slider li.sliderActive{
z-index: 1;
}
[/css]

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

Agora vamos configurar o javascript:

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

[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();
}
[/javascript]

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

[javascript]
$(function(){
$("#slider li:first").fadeIn();
setInterval( "simpleSlider()", 3000 );
});
[/javascript]

  • 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:

[html]
<!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>

[/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 :

      [javascript]
      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();
      }
      [/javascript]

Deixe uma resposta

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