slider utilizando css e html5

Front-end

31/03/2015

gostaria de fazer um slider de fotos utilizando apenas css e html5, encontrei varias formas, porem achei esta a mais viável ao observar a demo que havia no site, mas quando eu executo, ele não encontra as imagens (eu ja conferi e elas estão na pasta correta e com o nome correto tambem)porém nao da nem sinal e muito menos do slide :(

*Demo: http://blog.2bdesign.net/tutoriais/autoslideshow/

*Código HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Teste Slider</title>
    <link rel="stylesheet" type="text/css" href="_css/slidecss.css"/>
</head>

<body>
<div>
    <div id=”caixa-slider”>
        <div id=”slider”>
            <div id=”mascara”>
                <ul>
                    <li id=”primeiro”>
                        <a href=”#”><img src=”_imagens/um.jpg” alt= ” Lago ” /></a>
                    </li>
                    <li id=”segundo”>
                        <a href=”#”><img src=”_imagens/2.jpg” alt= ” Neve ” /></a>
                    </li>
                    <li id=”terceiro”>
                        <a href=”#”><img src=”_imagens/3.jpg” alt= ” Lagoa ” /></a>
                    </li>
                    <li id=”quarto”>
                        <a href=”#”><img src=”_imagens/4.jpg” alt= ” Campo ” /></a>
                    </li>
                    <li id=”quinto”>
                        <a href=”#”><img src=”_imagens/5.jpg” alt= ” Árvore ” /></a>
                    </li>
                </ul>
            </div>
            <div>
            </div>
        </div>
</body>
</html>


*Código CSS:

@charset “utf-8″;

#slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;

}

#mascara {
    overflow: hidden;
    height: 320px;
}

#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li {
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}
#slider li.primeira-anima {
    animation: cycle 25s linear infinite;
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
    -ms-animation: cycle 25s linear infinite;
    -o-animation: cycle 25s linear infinite;
}

#slider li.segunda-anima {
    animation: cycletwo 25s linear infinite;
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
    -ms-animation: cycletwo 25s linear infinite;
    -o-animation: cycletwo 25s linear infinite;
}

#slider li.terceira-anima {
    animation: cyclethree 25s linear infinite;
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
    -ms-animation: cyclethree 25s linear infinite;
    -o-animation: cyclethree 25s linear infinite;
}

#slider li.quarta-anima {
    animation: cyclefour 25s linear infinite;
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
    -ms-animation: cyclefour 25s linear infinite;
    -o-animation: cyclefour 25s linear infinite;
}

#slider li.quinta-anima {
    animation: cyclefive 25s linear infinite;
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite;
    -ms-animation: cyclefive 25s linear infinite;
    -o-animation: cyclefive 25s linear infinite;
}
@keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}

@-moz-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-moz-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}

@-webkit-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-webkit-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}
@-ms-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-ms-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-ms-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-ms-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-ms-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}


@-o-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-o-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-o-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}

.barra-progresso {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #000;
    animation: fullexpand 25s ease-out infinite;
}

@keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}



@-ms-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-o-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider:hover li,
#slider:hover .barra-progresso
{
    animation-play-state: paused;
}
Bianca Assone

Bianca Assone

Curtidas 0

Melhor post

Randrade

Randrade

31/03/2015

Bom, o seu código está meu estranho com essas aspas. E além disso, no exemplo que você demonstrou, existe a classe de clada imagem, que você também não colocou.

Porém, não sei se possui algo.

Eu coloquei um exemplo no jsfiddle, tente colocar primeiro o exemplo com as imagens da internet, após funcionar, apenas substitua pela imagem de seu diretório.

A mudança que fiz em seu código, foi essa:

<div class="caixa">
	<div id="caixa-slider">
		<div id="slider">
			<div id="mascara">
            <ul>
            <li id="primeiro" class="primeira-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img1.jpg" alt="Lago"/></a>
           </li>
            <li id="segundo" class="segunda-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img2.jpg" alt="Neve"/></a>
            </li>
            <li id="terceiro" class="terceira-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img3.jpg" alt="Lagoa"/></a>
           </li>
              <li id="quarto" class="quarta-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img4.jpg" alt="Campo"/></a>
           </li>
             <li id="quinto" class="http://blog.2bdesign.net/tutoriais/autoslideshow/quinta-anima">
            <a href="#"><img src="imagens/img5.jpg" alt="Árvore"/></a>
           </li>
            </ul>
			</div>
           <div class="barra-progresso"></div>
		</div>
	</div>
</div>
GOSTEI 1

Mais Respostas

Randrade

Randrade

31/03/2015

Só para desencargo de consciência, fiz o teste trocando as suas aspas (”) por (") e funcionou normalmente no fiddle.
GOSTEI 1
Jothaz

Jothaz

31/03/2015

Só completando me parece que o problema da Bia é que ela quer rodar com as imagens do projeto dela.

Bia você disse que as imagens estão na pasta correta e o CSS esta na pasta correta?

As vezes dependendo da estrutura de seu projeto você deve referenciar os objetos assim:

href="../_css/slidecss.css"

src="../_imagens/um.jpg"


Lembre-se CSS não retorna erro simplesmente não executa o esperado.

Qualquer dúvida posta a estrutura das suas pasta para facilitar a compreensão e a ajuda.
GOSTEI 1
Thiago Santana

Thiago Santana

31/03/2015

Concordo com você Jothaz!
As aspas como o Randrade citou e as imagens verifique estrutura de pastas do seu projeto.
GOSTEI 0
Randrade

Randrade

31/03/2015

Eu percebi também percebi que essa era a pergunta, porém ao copiar o código dela para o fiddle, apenas trocando as imagens, eu obtive erro. Após reorganizar o código, e fazendo as alterações, funcionou normalmente. Então neste caso, penso que o erro não é necessariamente nas imagens.

Mas mesmo com essas dicas, não conseguir resolver, siga a orientação do Jothaz, e poste sua estrutura, para analisarmos melhor.
GOSTEI 0
Jothaz

Jothaz

31/03/2015

Eu percebi também percebi que essa era a pergunta, porém ao copiar o código dela para o fiddle, apenas trocando as imagens, eu obtive erro. Após reorganizar o código, e fazendo as alterações, funcionou normalmente. Então neste caso, penso que o erro não é necessariamente nas imagens.

Mas mesmo com essas dicas, não conseguir resolver, siga a orientação do Jothaz, e poste sua estrutura, para analisarmos melhor.


Assertivo como sempre! Sua sugestão/correção procede e como pode ser visto na prova de conceito funciona.

Bom vamos aguardar a criadora da criatura se manifestar. kkkk
GOSTEI 0
Thiago Santana

Thiago Santana

31/03/2015

Eu percebi também percebi que essa era a pergunta, porém ao copiar o código dela para o fiddle, apenas trocando as imagens, eu obtive erro. Após reorganizar o código, e fazendo as alterações, funcionou normalmente. Então neste caso, penso que o erro não é necessariamente nas imagens.

Mas mesmo com essas dicas, não conseguir resolver, siga a orientação do Jothaz, e poste sua estrutura, para analisarmos melhor.


Assertivo como sempre! Sua sugestão/correção procede e como pode ser visto na prova de conceito funciona.

Bom vamos aguardar a criadora da criatura se manifestar. kkkk


Criador da criatura foi ótimo! kkkkkkkkkkk
Mas o importante é a solução dos problemas...
GOSTEI 0
Bianca Assone

Bianca Assone

31/03/2015

nossa,gente..perdoem minha noobisses, nao sei se fico feliz ou triste pq o erro realmente era APENAS O SENTIDO DAS MALDITAS ASPAS kkkk e eu nem reparei..mas enfim, mto obrigada por terem me ajudado, again :)
GOSTEI 0
Randrade

Randrade

31/03/2015

Trocar aspas, esquecer um [ ; ], fechar coxetes, esquecer de referenciar algum arquivo, etc. Isso são coisas que estão presentes na rotina de um programador.

Mas que bom que seu problema foi resolvido.


PS.: Jothaz, a "criatura" morreu! kkkk
GOSTEI 0
Jothaz

Jothaz

31/03/2015

Trocar aspas, esquecer um [ ; ], fechar coxetes, esquecer de referenciar algum arquivo, etc. Isso são coisas que estão presentes na rotina de um programador.

Mas que bom que seu problema foi resolvido.


PS.: Jothaz, a "criatura" morreu! kkkk


Antes ela do que eu! kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
GOSTEI 0
Bianca Assone

Bianca Assone

31/03/2015

Trocar aspas, esquecer um [ ; ], fechar coxetes, esquecer de referenciar algum arquivo, etc. Isso são coisas que estão presentes na rotina de um programador.

Mas que bom que seu problema foi resolvido.


PS.: Jothaz, a "criatura" morreu! kkkk


KKKKKKK Ainda bem que não foi só comigo então, até pq eu sou mto desatenta .. era uma criatura pequena ,gente XD
GOSTEI 0
Jothaz

Jothaz

31/03/2015

Só como complemento sugiro uma olhada na solução do bootstrap para slide.

É robusta, documentada, configurável e responsiva.

Pode parecer mais complexa, mas em alguns minutos lendo a documentação fica fácil.
GOSTEI 1
Bianca Assone

Bianca Assone

31/03/2015

Só como complemento sugiro uma olhada na solução do bootstrap para slide.

É robusta, documentada, configurável e responsiva.

Pode parecer mais complexa, mas em alguns minutos lendo a documentação fica fácil.


Nossa bem interessante, vou ler sim!! obrigada :)
GOSTEI 0
POSTAR