Criando Slide Show com jQuery

Nessa video iremos aprender como criar um slide show de uma maneira fácil e rápida, utilizando o jquery e um plugin chamado cycle. Bons estudos.

Links:

Cycle : http://malsup.com/jquery/cycle/




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

18 thoughts on “Criando Slide Show com jQuery

  1. Olá David eu enchendo o saco novamente.

    No final onde vc “numera as paginas ” não aparece na vídeo aula gostaria de saber onde colocou a id pager que ñ deu pra visualizar.

    1. @Andrew, a propriedade para paginação seria pager, então basta colocar o id q vc quer seja inserido essa paginação.

      $("#slide").cycle({
         pager : '#paginacao'
      })
      

      e no HTML

      <div id="paginacao"></div>
      

      Sobre o link ativo, ele é atribuído a class activeSlide

      1. Obrigado tudo certo vlw mesmo só estou com dificuldade quanto a personalizar o controle e a essa class activeSlide não sei como aplicala. mais nada que o google não resolva.

        Obrigado !

        1. Não tem misterio, se está dentro #paginacao, poderia fazer assim:

          #paginacao a{color:#036}
          #paginacao a.activeSlide{color:#F00}
          
          1. Kara so não digo que te amo por que vai fica estranho eu vo casar da qui a 2 meses, + deu certo e muito bom.

            Uma ideia, por que não cria um grupo de usuarios no seu site pra galera poder ta sempre por ai assistindo o mestre? acho que que teria bastante usuarios q reconhecem seu trabalho.

          2. Vc me assustou agora, rs.

            Pode ser uma possibilidade, ainda quero fazer mais coisas no site, ainda nem publiquei minhas aulas aqui devido ao tempo, vou pensar sua sugestão, e como fazer tbm. abrs

  2. Primeiramente parabéns pelo site e pelas vídeo aulas, consegui fazer o slide show perfeitamente e ainda alterei o Browser Effects para scrollLeft para fazer o slide ao meu gosto, só que não estou conseguindo colocar um identificador de imagens como por exemplo esse que se encontra no site da Apple: http://www.apple.com/br/ipad/ abaixo das imagens, você poderia me dar um auxilio ???
    Desde já agradeço, vlw…

    1. Fausto, vc vai utilizar o atributo page, e indicar aonde será colocado os links da paginação. Depois é só ir com css, e colocar as images nesse link:

      #page a{
      display:block;
       width:10px;
      height:10px
      background: url(images/bullet.png) no-repeat;
      text-indent : -999999px;
      }
      
        1. Fausto, vc tava fazendo certo, basta atribui o page, depois vc vai trabalhar com CSS, para posicionar o page na sua página

           $("#slides ul").cycle({
                      fx: 'scrollLeft',
                      speed: 1000,
                      timeout: 3000,
                    pager : '#pager'
                   });
          
          
  3. Olá…
    não estou conseguindo personalizar o menu pager…
    melhor dizendo não estou conseguindo substituir o “1234”
    por um bullet.png

    Tentei fazer no css da seguinte forma.
    }#pager a{
    display:inline;
    width:10px;
    height:10px;
    background: url(img/bullet.png) no-repeat;
    }

    mais não está funcionado…
    como faço?
    Abraço

Deixe uma resposta

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