Arkadaşlar yaptığım sitenin ana sayfasının slider kısmının otomatik olarak değişmesini istiyorum.
Div içinde kaydırma şeklinde yapıyordum fakat bunun sistemi biraz farklı işin içinden çıkamadım.
Navigastın butonları elle tıklayarak çalışıyor fakat belli süre sonra otomatik değişsin istiyorum.
Yardımcı olursanız sevinirim.
css bölümü
Div içinde kaydırma şeklinde yapıyordum fakat bunun sistemi biraz farklı işin içinden çıkamadım.
Navigastın butonları elle tıklayarak çalışıyor fakat belli süre sonra otomatik değişsin istiyorum.
Yardımcı olursanız sevinirim.
Kod:
<div class="slider" id="tabs_block">
<div id="section-1"><img src="images/screen_02.png" alt="screen 2" width="593" height="241" class="img" />
<h2>Başlık1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper magna vitae velit pharetra pharetra.</p>
<p class="button"><a href="#"><img src="images/but_DevaminiOku.png" alt="picture" width="114" height="37" border="0" /></a></p>
</div>
<div id="section-2"><img src="images/screen_01.png" alt="screen 1" width="593" height="241" class="img" />
<h2>Başlık2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper magna vitae velit pharetra pharetra.</p>
<p class="button"><a href="#"><img src="images/but_DevaminiOku.png" alt="picture" width="114" height="37" border="0" /></a></p>
</div>
<div id="section-3"><img src="images/screen_06.png" alt="screen 3" width="593" height="241" class="img" />
<h2>Başlık3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper magna vitae velit pharetra pharetra.</p>
<p class="button"><a href="#"><img src="images/but_DevaminiOku.png" alt="picture" width="114" height="37" border="0" /></a></p>
</div>
<ul class="body_menu_nav">
<li class="tabs-selected"><a href="#section-1">1</a></li>
<li><a href="#section-2">2</a></li>
<li><a href="#section-3">3</a></li>
</ul>
</div>css bölümü
Kod:
/* gallery */
.slider { width:1000px; margin:0 auto; padding:0px 0;}
.slider h2 { float:left; width:300px;}
.slider p { float:left; width:330px;}
.slider .img { float:left; margin:10px 10px 10px 20px;}
.slider p.button { border-top:1px solid #cbcbcb; margin:10px 0 0 0; padding:10px;}
.slider p a { color:#3f91f4; font-weight:normal;}