atm10
Üye
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.
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>