Esse Artigo é baseado em exemplos retirados da internet, só que de modo mais simplificado.

Vejam o modo mais simples de utilizar o “s3Slider” para Notícias.

Importe o arquivo “s3Slider.js” e depois chame a função com o ID geral que engloba o banner, exemplo:

$(document).ready(function(){
	$("#banner").s3Slider({
		timeOut: 4000
	});
});

Use as marcações < ul > / < li > para lista as Fotos, Títulos e Descrições. Segue exemplo:

<ul id="bannerContent">
	<li class="bannerImage">
		<img src="images/wide/1.jpg" />
		<span class="left">
			<strong>Title text 1</strong>
			<br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form...
		</span>
	</li>
	<li class="bannerImage">
		<img src="images/wide/2.jpg" />
		<span class="right">
			<strong>Title text 2</strong>
			<br />There are many variations of passages of Lorem Ipsum available...
		</span>
	</li>
</ul>

OBS: Crie as classes sempre começando com o nome da ID que engloba todo o banner, no meu caso usei o ID “banner”, repare em “bannerContent” e “bannerImage”, sempre iniciam com a palavra “banner”, pois o código que está no arquivo “s3Slider.js” vai reconhecer sempre a palavra que foi padrão na função inicial no artigo. Veja na linha abaixo:

$("#banner").s3Slider({

Criei uma classe “left” e outra “right” para posicionar as divs onde contém os Títulos de cada Foto. Veja o arquivo “style.css”

Veja print Abaixo:

Veja o EXEMPLO:

Baixe o SCRIPT AQUI.