SLİDER'IN HTML KODLARI
<!-- Slider --> <div id="slider"> <!-- 1.İçerik --> <div class="slider_icerik"> <div class="sicerik_sag"> <span>Emrah Demirağ | March 30 2011 | 2 Comments</span> <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.1</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat fringilla pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dapibus aliquam orci in cursus. Nulla id volutpat quam. Integer ullamcorper, nisi at hendrerit porttitor, augue erat vestibulum enim, id euismod mi dui ut ligula. Nulla posuere porttitor aliquam.</p> <div class="goster"><a href="#">Göster</a></div> </div> <div class="slider_resim"><img src="images/resim4.png" alt="" /></div> </div> <!-- 2.İçerik --> <div class="slider_icerik"> <div class="sicerik_sag"> <span>Emrah Demirağ | March 30 2011 | 2 Comments</span> <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.2</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat fringilla pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dapibus aliquam orci in cursus. Nulla id volutpat quam. Integer ullamcorper, nisi at hendrerit porttitor, augue erat vestibulum enim, id euismod mi dui ut ligula. Nulla posuere porttitor aliquam.</p> <div class="goster"><a href="#">Göster</a></div> </div> <div class="slider_resim"><img src="images/resim4.png" alt="" /></div> </div> <!-- 3.İçerik --> <div class="slider_icerik"> <div class="sicerik_sag"> <span>Emrah Demirağ | March 30 2011 | 2 Comments</span> <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.3</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat fringilla pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dapibus aliquam orci in cursus. Nulla id volutpat quam. Integer ullamcorper, nisi at hendrerit porttitor, augue erat vestibulum enim, id euismod mi dui ut ligula. Nulla posuere porttitor aliquam.</p> <div class="goster"><a href="#">Göster</a></div> </div> <div class="slider_resim"><img src="images/resim4.png" alt="" /></div> </div> <!-- 4.İçerik --> <div class="slider_icerik"> <div class="sicerik_sag"> <span>Emrah Demirağ | March 30 2011 | 2 Comments</span> <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.4</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat fringilla pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dapibus aliquam orci in cursus. Nulla id volutpat quam. Integer ullamcorper, nisi at hendrerit porttitor, augue erat vestibulum enim, id euismod mi dui ut ligula. Nulla posuere porttitor aliquam.</p> <div class="goster"><a href="#">Göster</a></div> </div> <div class="slider_resim"><img src="images/resim4.png" alt="" /></div> </div> <div id="slider_alt"> <ul> <li><a href="javascript:void(0)"><img src="images/resim5.png" alt="" /></a></li> <li><a href="javascript:void(0)"><img src="images/resim5.png" alt="" /></a></li> <li><a href="javascript:void(0)"><img src="images/resim5.png" alt="" /></a></li> <li><a href="javascript:void(0)"><img src="images/resim5.png" alt="" /></a></li> </ul> </div> </div> <!--#Slider -->Ve Jquery Kodları
// Slider
$("#slider_alt ul li:first").addClass("aktif");
$(".slider_icerik").hide();
$(".slider_icerik:first").show();
$("#slider_alt ul li").click(function(){
var a = $(this).index();
$("#slider_alt ul li").removeClass("aktif");
$(this).addClass("aktif");
$(".slider_icerik").hide();
$(".slider_icerik:eq("+a+")").show();
});