Kayan Slider Yapma


atm10

Üye
    Konu Sahibi
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.

Kod:
<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>
 




MaxiCep.com internet sitesi 5651 Sayılı Kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında BTK kurumu tarafından onaylı Yer Sağlayıcı olarak faaliyet göstermektedir. İçerikler, ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır.

MaxiCep.com; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir.

MaxiCep.com’un yer sağladığı içeriğin 5651 Sayılı Kanun’un 8 ila 9. maddelerine aykırı şekilde; kişilik haklarınızı ihlal ettiğini ya da hukuka aykırı olduğunu düşünüyorsanız Buradan yada [email protected] mail adresine e-mail göndererek iletişime geçerek bildirebilirsiniz.

Bildirimleriniz dikkatle ve özenle incelenmekte olup kişilik haklarınızın ihlali ya da hukuka aykırılığın tespiti halinde mevzuat kapsamında en kısa sürede işlem yaparak bilgi vereceğiz.
Üst Alt