Slider em largura total no Web Acappella

Antes de tudo, gostaria de convida você a participar da comunidade Web Acappella Full presente aqui mesmo neste site, a fim de fortalecer ainda mais esta comunidade que já existe a quase 3 anos. Basta se cadastrar no site, depois ativar a sua conta, clicando em um link enviado para o seu e-mail após o cadastro e começar a participar. Funciona como uma rede social comum, onde você pode postar algo em seu perfil e interagir com outros usuários, adicionando-os como amigos, mencionando-os em seus comentários, além de enviá-los mensagens.

Tem o objetivo simples de discutir ideias, compartilhar experiências que envolvem o uso do Web Acappella. Cadastre-se.

Vamos ao assunto

Andando por aí na internet, encontrei um slide super bacana e muito útil, além de excepcionalmente simples de instalar e manipular.

No fim do post irei deixar o link para download, no momento vamos à instalação do slide.

Instalar no Web Acappella

A mesma e velha maneira que usamos para colocar este tipo de plugin no Web Acappella, será aplicada mais uma vez. No pacote, você receberá 2 arquivos e uma pasta, a pasta contendo as imagens, um arquivo HTML e um arquivo jquery.

Copie a pasta e o arquivo jquery para a mesma pasta no seu servidor, onde você publicou o seu site. Abra o arquivo HTML, usando algum editor como o bloco de notas ou notepad ++.

Neste arquivo tem um código relativamente grande, mas é muito simples de separa e compreender o que se refere a o que. Primeiramente, vem o código em javascript, logo depois o CSS e por fim o HTML. Para funcionar no Web Acappella, pode copiar todo o código do jeito que está e colar na head da página no Web Acappella que quer que ele apareça.

Entendendo o código

-JavaScript

No javascript, só iremos mexer se quisermos adicionar mais imagens ao slide, não vamos aprofundar muito neste quesito. Para mudar o número de imagens, basta procurar, logo nas primeiras linhas por:

items: 3,

O número 3 indica o número de itens do slide, basta alterá-lo para o desejado. Mas não é só isso que se deve fazer para o adicionar imagens, no HTML você verá como é feito.

- CSS

Não tem muito o que alterar, mas você pode mudar a posição do slide na vertical, indicando a distância que ele ficará do topo para você poder ajustar melhor o seu menu. Na parte do CSS, procure por:

#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 0px;
position: absolute;
top: 0px;
}

No indicador: top, você determina o número de pixels que quer que ele se distancie do topo, para chegar mais próximo você deve diminuir o número, que no caso ficaria em números negativos, para se distanciar mais, faça o contrário. No geral é só isso que temos para alterar no CSS.

- HTML

Logo abaixo do CSS, temos o HTML que corresponde ao conteúdo do slide, onde podemos alterar as imagens e os textos do mesmo. Cada imagem com seu respectivo texto, é indicado com um bloco deste.

<div style=”background-image: url(img/iceage.jpg);”>
<div>
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest   to  reunite a human baby with his tribe.</p>
</div>
</div>

Onde temos a imagem, o título e o texto. Para mudar a imagem, basta colocá-la na pasta ‘img’ e vir no código para alterar o nome e a extensão da mesma indicada em:

img/iceage.jpg,

Bata mudar o nome a extensão da imagem, correspondente à imagem que você salvou na pasta ‘img’.

Entre as tags ‘<h4>’, está o título e entre as tags <p>, a descrição do slide.

Para adicionar mais uma imagem, duplique o bloco de código acima, repetindo os procedimentos acima. Depois cole todo código na head da página que deseja exibir o slide.

Abaixo você pode fazer o download do slide.

Download   |   Ver o slide

fonte : http://webacappellafull.com/slide-show-em-largura-total-web-acappella/