kayan slider yapmak
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam

Anasayfa
İletişim
Üyeler

kayan slider yapmak

Paylaş  :
profil
atm10
GÖRÜNTÜLENME(338)
RAPOR ET
Kayan slider yapmak istiyorum ancak bunu başaramadım.ScrollLefti bir türlü kaydıramadım.

sok_ok kısmına tıklayınca scrollleftin kaymasını istemekteyim.
Bunu nasıl yapabilirim?

kodların tamamı aşağıdadır.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<style>

.kayan_slider_dis{
display:block;
float:left;
margin:0px;
padding:0px;
width:622px;
height:205px;
border:1px solid #D4D4D4;
border-left:none;
border-right:none;

}
.ok{
display:block;
float:left;
margin:0px;
padding-top:85px;
width:30px;
height:120px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #D4D4D4;
border-left-color: #D4D4D4;
cursor:pointer;
background-color:#000000;
color:#FFFFFF;

}
.ana_slider_dis{
display:block;
float:left;
margin-top:15px;
padding:0px;
width:558px;
height:203px;
}

.tum_slider_veri{
display:block;
float:left;
margin:0px;
padding:0px;
width:1500px;
height:197px;
margin-top:5px;
margin-bottom:5px;
margin-left:10px;

}
.kare{
display:block;
float:left;
padding :15px;
margin: 15px;
border: 1px solid #ddd;
width:80px;
height:100px;

}
</style>

<script type="text/javascript">
$(document).ready(function(){
var scrollLeft_x = 0;
$("#sol_ok").on("click",function(){
scrollLeft_x += 120;
$(".ana_slider_dis").animate({scrollLeft : scrollLeft_x+"px"},500);
});

});
</script>

<div class="kayan_slider_dis">
<div id="sol_ok" class="ok">Sol Ok</div>
<div class="ana_slider_dis">

<div class="tum_slider_veri">
<div class="kare"> Kare 1 </div>
<div class="kare"> Kare 2 </div>
<div class="kare"> Kare 3 </div>
<div class="kare"> Kare 4 </div>
<div class="kare"> Kare 5 </div>
<div class="kare"> Kare 6 </div>
<div class="kare"> Kare 7 </div>
<div class="kare"> Kare 8 </div>
<div class="kare"> Kare 9 </div>
<div class="kare"> Kare 10 </div>
</div>
</div>
<div id="sol_ok" class="ok">Sağ Ok</div>
</div>



</div>




cArleone
cArleone 3 Yıl Önce Cevaplandı
slider yaparken scroll kaydırmak yerine alanı margin left ile kaydırman daha iyi olur.örnek iç içe 2 div koy.dıştakine 900px diyelim ve overflow ile taşanları gizle.içteki dive ise içindeki obje kadar width verip onu margin ile kaydır.örnek bir kaç sliderim inceleyebilirsin.
http://ustaderslik.com/slider/
http://ustaderslik.com/slider2/
http://ustaderslik.com/slider3/



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol