Javascript kullanmadan içerik değiştir

Aynı işlem javascript kullanılarak yapılmaktadır bir çok sitede ama bunu javascript kullanmadan da yapabilmemiz mümkündür.

HTML

<div id="content-slider">
	<ul id="content-slider-inside">
		<li id="one">1</li>
		<li id="two">2</li>
		<li id="three">3</li>
		<li id="four">4</li>
		<li id="five">5</li>
	</ul>
</div>

<ul id="navigation">
	<li><a href="#one">1</a></li>
	<li><a href="#two">2</a></li>
	<li><a href="#three">3</a></li>
	<li><a href="#four">4</a></li>
	<li><a href="#five">5</a></li>
</ul>

CSS

#content-slider {
	width: 650px;
	overflow: hidden;
	height: 300px;
}

#content-slider-inside {
	list-style: none;
	height: 320px; 		// these 3 lines
	overflow: scroll;	// help Opera
	overflow-y: hidden;	// behave
}

	#content-slider-inside li {
		width: 650px;
		height: 300px;
	}

Demo Download

Kaynak(Source)