Slide Carousel para Web Acappella

Lindo Slide Carousel para Web Acappella

Um slide carousel é um conjunto de imagens na horizontal que pode servir para mostrar alguns trabalhos ou notícias ou o que seja destaque. Este que estou postando aqui hoje é um plugin muito simples que funciona a base de jquery e um bocado de HTML. É muito simples de instalar no Web Acappella e mais simples ainda de deixar da foram que você quer.

Instalação

Para instalar no Web Acappella, iremos precisar dos arquivos que compõe este plugin que você pode baixar logo no final deste post, onde deixarei também um link para visualização do slide funcionando.

Você receberá em um arquivo zipado, uma pasta e dois arquivos, um em HTML e outro em JS e a pasta contém as imagens. Copie e cole a pasta e o arquivo JS na mesma pasta onde o seu site foi publicado, pois o arquivo HTML contém caminhos que irão buscar estes arquivos.

Abra o arquivo HTML, pode ser com o bloco de notas, copie todo o conteúdo e cole em uma área HTML no Web Acappella, você pode posicionar a área HTML onde achar melhor no seu site, depois publique.

Lembre-se que se a pasta com as imagens e o arquivo JS não estiverem na mesma pasta onde seu site foi publicado, isso não irá funcionar. A próxima parte será trocar as imagens.

Mudando as Imagens

Há uma área específica no código HTML que é responsável por exibir as imagens daquela pasta que colocamos no servidor. Você irá procurar por estas linhas e fazer a alteração do caminho das imagens, mas antes é preciso que hospede as imagens no servidor. Para não perder a organização, hospede as imagens na mesma pasta que estão as imagens nativas do plugin (img).

As linhas são essas abaixo:

<li><img src=”img/up1.jpg” alt=”" /><span>Image1</span></li>
<li><img src=”img/up2.jpg” alt=”" /><span>Image2</span></li>
<li><img src=”img/up3.jpg” alt=”" /><span>Image3</span></li>
<li><img src=”img/up4.jpg” alt=”" /><span>Image4</span></li>
<li><img src=”img/up5.jpg” alt=”" /><span>Image5</span></li>
<li><img src=”img/up6.jpg” alt=”" /><span>Image6</span></li>

Se você hospedou as imagens na pasta img, pasta alterar somente o nome e a extensão, colocando o nome e a extensão das imagens que você colocou.

Por exemplo nesta parte: src=”img/up1.jpg você coloca o nome no lugar de ‘up1′ e a extensão no lugar de ‘.jpg’. E entre as Tags ‘<span>’ Você pode dar um nome às imagens. Para colocar mais imagens no seu slide, basta copiar qualquer linha destas acima, colar na linha de baixo e mudar o nome da imagem.

Não se esqueça de depois de alterar as imagens, colar o código inteiro novamente no Web Acappella para que a alteração seja feita.

Adicionar link às imagens

Se você quer que as imagens do slide tenham links, você pode adicioná-los individualmente da seguinte maneira: Adicione este código no início de cada linha substituindo o ‘#’ pelo endereço do link que deseja naquela imagem, <a href=”#”> e adicione isto no final de cada linha, </a>. Irá ficar assim:

<a href=”#”><li><img src=”img/up1.jpg” alt=”" /><span>Image1</span></li></a>

Faça isso em cada linha, assim cada imagem terá um link.

Ver funcionando      |       Download

fonte : http://webacappellafull.com/lindo-slide-carousel-para-web-acappella/