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>\r\n\r\n<style>\r\n\r\n.kayan_slider_dis{\r\ndisplay:block;\r\nfloat:left;\r\nmargin:0px;\r\npadding:0px;\r\nwidth:622px;\r\nheight:205px;\r\nborder:1px solid #D4D4D4;\r\nborder-left:none;\r\nborder-right:none;\r\n\r\n}\r\n .ok{\r\n display:block;\r\n float:left;\r\n margin:0px;\r\n padding-top:85px;\r\n width:30px;\r\n height:120px;\r\n border-right-width: 1px;\r\n border-left-width: 1px;\r\n border-right-style: solid;\r\n border-left-style: solid;\r\n border-right-color: #D4D4D4;\r\n border-left-color: #D4D4D4;\r\n cursor:pointer;\r\n background-color:#000000;\r\n color:#FFFFFF;\r\n\r\n}\r\n.ana_slider_dis{\r\ndisplay:block;\r\nfloat:left;\r\nmargin-top:15px;\r\npadding:0px;\r\nwidth:558px;\r\nheight:203px;\r\n}\r\n\r\n.tum_slider_veri{\r\ndisplay:block;\r\nfloat:left;\r\nmargin:0px;\r\npadding:0px;\r\nwidth:1500px;\r\nheight:197px;\r\nmargin-top:5px;\r\nmargin-bottom:5px;\r\nmargin-left:10px;\r\n\r\n}\r\n.kare{\r\ndisplay:block;\r\nfloat:left;\r\npadding :15px;\r\nmargin: 15px;\r\nborder: 1px solid #ddd;\r\nwidth:80px;\r\nheight:100px;\r\n\r\n}\r\n</style>\r\n\r\n<script type=\"text/javascript\">\r\n$(document).ready(function(){\r\n var scrollLeft_x = 0;\r\n$(\"#sol_ok\").on(\"click\",function(){\r\n scrollLeft_x += 120;\r\n $(\".ana_slider_dis\").animate({scrollLeft : scrollLeft_x+\"px\"},500);\r\n});\r\n\r\n});\r\n</script>\r\n\r\n<div class=\"kayan_slider_dis\">\r\n<div id=\"sol_ok\" class=\"ok\">Sol Ok</div>\r\n<div class=\"ana_slider_dis\">\r\n\r\n<div class=\"tum_slider_veri\">\r\n <div class=\"kare\"> Kare 1 </div>\r\n <div class=\"kare\"> Kare 2 </div>\r\n <div class=\"kare\"> Kare 3 </div>\r\n <div class=\"kare\"> Kare 4 </div>\r\n <div class=\"kare\"> Kare 5 </div>\r\n <div class=\"kare\"> Kare 6 </div>\r\n <div class=\"kare\"> Kare 7 </div>\r\n <div class=\"kare\"> Kare 8 </div>\r\n <div class=\"kare\"> Kare 9 </div>\r\n <div class=\"kare\"> Kare 10 </div>\r\n</div>\r\n</div>\r\n<div id=\"sol_ok\" class=\"ok\">Sağ Ok</div>\r\n</div>\r\n\r\n</div>\r\n
","headline":"kayan slider yapmak ","mainEntity":{"@type":"Question","name":"kayan slider yapmak ","url":"https://uzmanim.net/soru/kayan-slider-yapmak/3773","author":{"@type":"Person","name":"atm10"},"comment":[],"commentCount":0,"dateCreated":"2014-05-01T18:13:28.297+03:00","dateModified":"2014-05-01T18:13:28.297+03:00","datePublished":"2014-05-01T18:13:28.297+03:00","keywords":"jquery","publisher":{"@type":"Organization","name":"uzmanim.net","url":"https://uzmanim.net"},"text":"
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>\r\n\r\n<style>\r\n\r\n.kayan_slider_dis{\r\ndisplay:block;\r\nfloat:left;\r\nmargin:0px;\r\npadding:0px;\r\nwidth:622px;\r\nheight:205px;\r\nborder:1px solid #D4D4D4;\r\nborder-left:none;\r\nborder-right:none;\r\n\r\n}\r\n .ok{\r\n display:block;\r\n float:left;\r\n margin:0px;\r\n padding-top:85px;\r\n width:30px;\r\n height:120px;\r\n border-right-width: 1px;\r\n border-left-width: 1px;\r\n border-right-style: solid;\r\n border-left-style: solid;\r\n border-right-color: #D4D4D4;\r\n border-left-color: #D4D4D4;\r\n cursor:pointer;\r\n background-color:#000000;\r\n color:#FFFFFF;\r\n\r\n}\r\n.ana_slider_dis{\r\ndisplay:block;\r\nfloat:left;\r\nmargin-top:15px;\r\npadding:0px;\r\nwidth:558px;\r\nheight:203px;\r\n}\r\n\r\n.tum_slider_veri{\r\ndisplay:block;\r\nfloat:left;\r\nmargin:0px;\r\npadding:0px;\r\nwidth:1500px;\r\nheight:197px;\r\nmargin-top:5px;\r\nmargin-bottom:5px;\r\nmargin-left:10px;\r\n\r\n}\r\n.kare{\r\ndisplay:block;\r\nfloat:left;\r\npadding :15px;\r\nmargin: 15px;\r\nborder: 1px solid #ddd;\r\nwidth:80px;\r\nheight:100px;\r\n\r\n}\r\n</style>\r\n\r\n<script type=\"text/javascript\">\r\n$(document).ready(function(){\r\n var scrollLeft_x = 0;\r\n$(\"#sol_ok\").on(\"click\",function(){\r\n scrollLeft_x += 120;\r\n $(\".ana_slider_dis\").animate({scrollLeft : scrollLeft_x+\"px\"},500);\r\n});\r\n\r\n});\r\n</script>\r\n\r\n<div class=\"kayan_slider_dis\">\r\n<div id=\"sol_ok\" class=\"ok\">Sol Ok</div>\r\n<div class=\"ana_slider_dis\">\r\n\r\n<div class=\"tum_slider_veri\">\r\n <div class=\"kare\"> Kare 1 </div>\r\n <div class=\"kare\"> Kare 2 </div>\r\n <div class=\"kare\"> Kare 3 </div>\r\n <div class=\"kare\"> Kare 4 </div>\r\n <div class=\"kare\"> Kare 5 </div>\r\n <div class=\"kare\"> Kare 6 </div>\r\n <div class=\"kare\"> Kare 7 </div>\r\n <div class=\"kare\"> Kare 8 </div>\r\n <div class=\"kare\"> Kare 9 </div>\r\n <div class=\"kare\"> Kare 10 </div>\r\n</div>\r\n</div>\r\n<div id=\"sol_ok\" class=\"ok\">Sağ Ok</div>\r\n</div>\r\n\r\n</div>\r\n
","answerCount":0,"suggestedAnswer":null,"upvoteCount":0}}
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>
Toplam 0 cevap