Como fazer um Slideshow em Jquery – Jssor Slider

Por | Atualizado em 2015-03-10

Neste tutorial iremos explicar como fazer um Slideshow em Jquery usando o plugin Jssor Slider. O Plugin Jssor Slider coloca à sua disposição vários tipos de “slideshows”, sendo totalmente gratuito e livre para usar nos seus websites.

O mais interessante é que o plugin disponibiliza várias demonstrações (demos), que podem ser usadas para criar o seu seu próprio Slideshow.

Collage of many nature photos

[help]Caso tenha dificuldades, poderá experimentar criar o seu Slideshow usando o serviço Flickr (da Yahoo). Para isso, basta seguir os procedimentos do seguinte tutorial: Como fazer um Slideshow com o Flickr.[/help]

Como fazer um Slideshow em Jquery

1. Comece por aceder ao site do Jssor Slider (menu Download) e proceda ao download do plugin. Ainda na página do Jssor Slider selecione o tipo de Slideshow que irá usar.

2. Agora, extraia os arquivos do plugin para um diretório no seu PC. Para isso, você deverá usar um “descompactador” de arquivos como o Winrar ou o 7zip.

3. Aceda as pastas “Demos” e “Examples” e procure o arquivo “.html” referente ao slideshow que irá usar. No nosso exemplo, iremos usar o “Fade Slideshow”, localizado na pasta “demos-jquery” (simple-fade-slideshow.source.html).

4. Abra o arquivo html usando um editor apropriado. No nosso exemplo, iremos usar o Notepad++ um editor de código gratuito que suporta várias linguagens.

5. Na parte inicial do documento você encontra a referência aos arquivos que são necessários para fazer o slideshow em Jquery. Neste caso, são os arquivos “jquery-1.9.1.min.js”, “jssor.js” e “jssor.slider.js”, que se encontram na pasta “js” que extraiu. Faça o upload desses arquivos para o seu servidor via FTP (usando o Filezilla) e adicione os respectivos links no código do documento.

slideshow jquery

6. Agora, basta adicionar o link das imagens que irá usar, devidamente hospedadas online em serviços como imageshack ou usando os seus servidores (se possível).

Você deverá adicionar o link na secção “Slides Container”, substituindo o código de exemplo pelo link. Por exemplo:

<img u="image" src="../img/landscape/02.jpg" />

por

<img u="image" src="http://www.example.com/imagem.jpg" />

7. Para terminar, é só copiar o código do exemplo e adicionar na página onde pretende exibir o Slideshow. Você poderá ainda guardar o arquivo do slideshow no formato “.html” e fazer o upload para o seu servidor podendo posteriormente “chamar” o slideshow via “iframe”. Por exemplo:

<iframe src="http://www.exemplo.com/simple-fade-slideshow.source.html"></iframe>

[tip]Se necessário, você poderá hospedar o arquivo “.html” nos servidores do Google Drive e usa-lo diretamente nas suas páginas. Para mais detalhes, consulte o seguinte tutorial: Como hospedar arquivos no Google Drive. [/tip]

Deixe uma resposta

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