Kayan Slider Yapma

Sponsorlu Bağlantılar

atm10

Üye
    Konu Sahibi
Kayan Slider Yapma
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>
 


Üst Alt