Curso Criando um Site do Zero - Aula 09 - Slideshow responsivo

Nesta vídeo-aula criaremos o slideshow responsivo.

Para criarmos o slideshow responsivo utilizaremos o plugin JQuery Cycle. Segue abaixo o link do plugin:

Download Plugin Jquery Cicle

Após baixar o arquivo do plugin, linkaremos este arquivo em nosso projeto.

<script src="../libraries/jquery.cycle.lite.js"></script>

Criaremos também um arquivo externo head.php para colocar todas as nossas tags que se repetem.

O arquivo head.php ficará da seguinte forma:

<meta charset="UTF-8">
<meta name="author" content="Webdesign em Foco">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../libraries/stylesheet.css">
<script src="../libraries/jquery-2.1.4.min.js"></script>
<script src="../libraries/javascript.js"></script>

Este procedimento serve para que quando necessitarmos alterar estes arquivos, mudaremos apenas o head.php, não necessitando abrir todas as páginas para alterar o projeto. Repare que o link do plugin cycle não vai para o arquivo head.php. Isso acontece porque utilizaremos o plugin cycle apenas na nossa index.

Após criarmos o arquivo head.php, devemos linká-lo em nossas páginas dentro da pasta views. Para tanto inseriremos o código abaixo:

<?php require_once ("../libraries/head.php"); ?>

Este código vai entre as tags head da index.php

Nesse mesmo sentido, criaremos o arquivo body.php. Esse arquivo conterá as características que estão presentes em todas as páginas na body, como por exemplo a logomarca e os links.

O arquivo ficará da seguinte forma:

<div class="ind-topo"></div>

<nav>
    <ul>
        <li><a href="index">Home</a></li>
        <li><a href="sobrenos">Sobre Nós</a></li>
        <li><a href="anuncios">Anúncios</a></li>
        <li><a href="contato">Contato</a></li>
        <li><a href="cadastrese">Cadastre-se</a></li>
    </ul>
</nav>

<div class="ind-botao">
    <img src="../images/botao.png" alt="Botão Mobile" title="Botão Mobile">
</div>

<div class="ind-logo">
    <picture>
        <source media="(max-width: 480px)" srcset="../images/mobile-logo.png">
        <source media="(min-width: 481px) and (max-width: 768px)" srcset="../images/mobile-logo.png">
        <source media="(min-width: 769px)" srcset="../images/desktop-logo.jpg">
        <img src="../images/mobile-logo.png" alt="Logomarca WEF Veículos" title="Logomarca WEF Veículos">
    </picture>
</div>

Repare no arquivo acima que temos os links, a logomarca, o botão mobile e a faixa superior do site. Todos esses elementos aparecem em todas as páginas, logo se for necessário alterar algum desses elementos, basta mudar um arquivo que todas as páginas serão alteradas.

Após criarmos o arquivo body.php, devemos linká-lo em nossas páginas dentro da pasta views. Para tanto inseriremos o código abaixo:

<?php require_once ("../libraries/body.php"); ?>

Este código vai entre as tags body da index.php

Após criarmos os arquivos externos (head.php e body.php) e após linkarmos nosso arquivo jquery cycle, devemos chamar a função cycle no JQuery. Assim faremos isso:

$('.ind-slide').cycle({
    fx: 'fade'
})

No código acima, nossa classe ind-slide vai chamar a função cycle.

No html do arquivo index.php inseriremos nossas divs com classe ind-slide. A inserção ficará assim:

<div class="ind-slide">
    <picture>
        <source media="(max-width: 480px)" srcset="../images/mobile-slide1.jpg">
        <source media="(min-width: 481px) and (max-width: 768px)" srcset="../images/tablet-slide1.jpg">
        <source media="(min-width: 769px)" srcset="../images/desktop-slide1.jpg">
        <img src="../images/mobile-slide1.jpg" alt="Veículos WEF - Slide 1" title="Veículos WEF - Slide 1">
    </picture>
        
    <picture>
        <source media="(max-width: 480px)" srcset="../images/mobile-slide2.jpg">
        <source media="(min-width: 481px) and (max-width: 768px)" srcset="../images/tablet-slide2.jpg">
        <source media="(min-width: 769px)" srcset="../images/desktop-slide2.jpg">
        <img src="../images/mobile-slide2.jpg" alt="Veículos WEF - Slide 2" title="Veículos WEF - Slide 2">
    </picture>

    <picture>
        <source media="(max-width: 480px)" srcset="../images/mobile-slide3.jpg">
        <source media="(min-width: 481px) and (max-width: 768px)" srcset="../images/tablet-slide3.jpg">
        <source media="(min-width: 769px)" srcset="../images/desktop-slide3.jpg">
        <img src="../images/mobile-slide3.jpg" alt="Veículos WEF - Slide 3" title="Veículos WEF - Slide 3">
    </picture>
</div>

No código acima, temos três pictures, ou seja, nosso slideshow terá três fotos em movimento.

Por fim faremos a estilização do nosso CSS.

.ind-slide{float: left; width: 100%; z-index: 1;}
.ind-slide img{width: 100%;}
.ind-slide picture{width: 100%;}

/*Smartphone*/
@media only screen and (max-width: 480px){
.ind-slide{height: 200px;}
    .ind-slide img{max-height: 200px;}
}

/*Tablet*/
@media only screen and (min-width: 481px) and (max-width: 768px){
.ind-slide{height: 200px;}
    .ind-slide img{max-height: 200px;}
}

/*Desktop*/
@media only screen and (min-width: 769px){
.ind-slide{height: 450px;}
    .ind-slide img{max-height: 450px;}
}