WEB DİZAYN
Content Slider
En çok kullanılan uygulamalardan olan content slider çok çeşiTLi olarak gazete ve haber sitelerinde kullanılmaktadır. Çok basit bir kodu var olmasına rağmen çok kullanışlı bir uygulamadır. Yeni boş html sayfamızı açtığımıda HEAD tagları arasına aşağıdaki kodu yazmamız gerekiyor.
< link rel="stylesheet" type="text/css" href="style.css" />
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" >< /script>
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" >< /script>
< script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);});
< /script>
Body kısmınada aşağıdaki kodları yazmamız gerekiyor ve bu kadar. Tabi gerekli olan css dosyaları ve jquery kodları indirme butonuna indirerek elde edebilirsiniz.
< div id="featured" align="center" >
< ul class="ui-tabs-nav">
< li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">< a href="#fragment-1">< img src="images/image1-small.jpg" alt="" />< span>Çarpıcı ve Kullanışlı bir uygulama.< /span>< /a>< /li>
< li class="ui-tabs-nav-item" id="nav-fragment-2">< a href="#fragment-2">< img src="images/image2-small.jpg" alt="" />< span>Çarpıcı ve Kullanışlı bir uygulama.< /span>< /a>< /li>
< li class="ui-tabs-nav-item" id="nav-fragment-3">< a href="#fragment-3">< img src="images/image3-small.jpg" alt="" />< span>Çarpıcı ve Kullanışlı bir uygulama.< /span> < /a>< /li>
< li class="ui-tabs-nav-item" id="nav-fragment-4">< a href="#fragment-4">< img src="images/image4-small.jpg" alt="" />< span>Çarpıcı ve Kullanışlı bir uygulama.< /span>< /a>< /li>
< /ul>
-- First Content --
< div id="fragment-1" class="ui-tabs-panel" style="">
< img src="images/image1.jpg" alt="" />
< div class="info" >
< h2>< a href="#" >Çarpıcı < /a>< /h2>
< p>Çarpıcı ve Kullanışlı bir uygulama. Gazete ve haber sitelerinde en çok kullanılan uygulamadır. < /a> < /p>
< /div>
< /div>
-- Second Content --
< div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
< img src="images/image2.jpg" alt="" />
< div class="info" >
< h2>< a href="#" >Çarpıcı< /a>< /h2>
< p>Çarpıcı ve Kullanışlı bir uygulama. Gazete ve haber sitelerinde en çok kullanılan uygulamadır.< a href="#" >Daha fazlası...< /p>
< /div>
< /div>
-- Third Content --
< div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
< img src="images/image3.jpg" alt="" />
< div class="info" >
< h2>< a href="#" >Çarpıcı< /a>< /h2>
< p>Çarpıcı ve Kullanışlı bir uygulama. Gazete ve haber sitelerinde en çok kullanılan uygulamadır.< a href="#" >Daha fazlası...< /a>< /p>
< /div>
< /div>
-- Fourth Content --
< div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
< img src="images/image4.jpg" alt="" />
< div class="info" >
< h2>< a href="#" >Çarpıcı< /a>< /h2>
< p>Çarpıcı ve Kullanışlı bir uygulama. Gazete ve haber sitelerinde en çok kullanılan uygulamadır.< a href="#" >Daha fazlası...< /a>< /p>
< /div>
< /div>
< /div>
< /div>
