javascript - Horizontal Scrolling Div -

i'm interested in putting horizontal sliding div screenshots of app on website. trying similar done here.

this relevant html find:

<div id="screenshot_container" class="screenshot_container">             <div id="screens" class="screenshots" style="left: 0px;">                  <img alt="screenshot of iou (i owe you)debt calculator" class="screen2" src="http://lh3.ggpht.com/np-fuq6p_rwh62edpb4btiqoeounriiacdi8-kxmcr28hkrdwu0_nnj3nqqnk1gismqipzw3yy_ptg5ccf7hqu5x=h200" id="screen1">                  <img alt="screenshot of iou (i owe you)debt calculator" class="screen2" src="http://lh3.ggpht.com/s02i2hmnirbe6ms6pbylljew5rcxhwuj3wz25tp5zomigygidy6211ihd6mjuvuism-rwpejb-fykbi5mupxbvq=h200" id="screen2">                  <img alt="screenshot of iou (i owe you)debt calculator" class="screen2" src="http://lh3.ggpht.com/j6syrkci1vn7vgt3tf84lexdsz5ys1rindbmjorpfexhjej-eny71c0bik0lejyvnlxyopmkbhilcgu7f1ricq=h200" id="screen3">                  <img alt="screenshot of iou (i owe you)debt calculator" class="screen2" src="http://lh5.ggpht.com/6j4s5kbiz1fyuzm8s6nd8xxy3you4337cpus_z7vmlze_4o00ziiypuahmuhtlxrwc9xjbf5lanjt1cfdrulejsj=h200" id="screen4">                  <img alt="screenshot of iou (i owe you)debt calculator" class="screen2" src="http://lh4.ggpht.com/6vgrgfvqy-nvyikit7u2dxthgysj_92-gt-ibwtzjtepmgqi1njgj37mxeyvta8xphm2t3hcjxsrmlzzmrdmrlsd=h200" id="screen5">                  <img alt="screenshot of iou (i owe you)debt calculator" class="screen2" src="http://lh3.ggpht.com/mcqlepzbxucrpk4xi4i_moxwds39prrgxd0_nixdi4_i1p8xh7d6wlrlyys05hcm2ykb8iqmmeeaehkqw1syad0=h200" id="screen6">              </div>         <div tabindex="0" class="carousel-side carousel-left" style="display: none;" aria-hidden="true"><input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="carousel-arrow carousel-arrow-left"></div></div><div tabindex="0" class="carousel-side carousel-right"><input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="carousel-arrow carousel-arrow-right"></div></div></div> 

and here relevant css:

.carousel-side {     cursor: pointer;     height: 200px;     position: absolute;     top: 0;     width: 100px; } .carousel-arrow {     height: 57px;     position: absolute;     top: 71px;     width: 46px; } .carousel-left {     background: linear-gradient(to right, #ffffff 0px, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent;     left: 0; } .carousel-right {     background: linear-gradient(to right, rgba(255, 255, 255, 0) 0px, #ffffff 100%) repeat scroll 0 0 transparent;     right: 0; } .carousel-side:focus {     outline: 0 none; } .carousel-arrow-left {     background: url("data:image/png;base64,ivborw0kggoaaaansuheugaaac4aaaa5cayaaabjahkuaaaejuleqvr42u2ad0iuyrzhts+vrmm2s22297jfrxth0adsoqhoe+0jfthsjkkkivg2liog0h/gnbwhgtkynvphl6olsmwg/whfx/yml5db3r3v817uwqfx9i7v877f97eex8vr/+sffzwvlvuc3kdhvgz0/h4ltxvniqucgqa2qanqgwpad3w8tbq3c6sjgoiwoa0ias1bfv6mr0dcdb7kpqakx91woacydeaeyy4ko/okfyivgmqbajgeifrhnibr7cbqmamscu82ndbh3f8enmtait/7gzz8r7y1toyv3/4mocsyc5adyclxc7k9iplliaop30xjvxggi98vh62t4cde7gumgi0fx0vje8amfyoxtrzpkozju9ad1kw7pju1ykf12lfk5dlgx4vcs1l1/q9+skutz569t8df54e+bcmdagtuzms0ap3bapiyoldm+pkvxha58bkwi/5nmftcjhcjnfqclym09qktwnr8r6vnhsznwwyjjs7nwm7xakl4a9wfy6xrl+pyqbaktt00frsbraf+sceahd8wjlysbauznsgijaalwb7ivhowi8f/hody7ggrlsmclkqbckijaatgjdiqs88knbutrljeglrr+ipwod+hsvabpuleojjhjrurrbpwitwq8ze3b8pafeooesnmdguhtlphkixi6tgadapjwqpwepa1529deayaccsfetuswwaa2jjhkbniijvufs4ldzqu2oihyc7yfsyzmnvva6gmxfygnqzdwbiwdbxabnz5wgnbigm3kqv7g8lgpqqkohmbpllwg1lwebdi25efbyhldcwewymqolf3woxp/s133+spidgt4tjrnomcivqpncicpx0vsjoit9iluhacyvnwujmfkndhkkxykx9c+lay2lknxzyulp+veq7ntou8hflmy48d4y5mm0qjdke4gen038rxxwubhxlkes3afeheljxqj/6dzmyatrdt6hwvyugpikloaeleg79fuj4jctuho8dkujz3isiftfef6ystvzfuyqjbpadgalcyjlsrpsqntdhu1tlqz05b873f5wtmrmga2tzxp1axnlgll5n+u2eokrmqrmogzlkrnweh8cxvaj20+v9kt1a0exfasmjmjtsa7wcggwvgb0sqovnp6yjzacnheifggkqas1tsomo0y/kstyexvkuvlhlvgu9yati6cpoxskkmq825iq22bpysbz2iszbnrtqdbctk6glndlhu1dgfygmtrwhrhldryt6hexwxjjdhnjapwvim1vswkb2o5lkzivooccuhokj3jbwuahuaqqvfa3kqbvs5o/rh83kdt2cchw8xurpncupp0rv+shtpjtyzja1dd9+msyufyyii5z3nrny3tdv64warcupci4+x/gcffibhky/muvybtuxkpu2zftubt5swzur9/ly0mcytbd2d1+u59m/kiu3byx92crugfhrmdozf+xne8jzjttlr+hhyc+cr3jdfm/acpetclsq6vnxldfwag9hooo+xiz0flj+g8+gfvk/a/qi9bnrux5ffpwaaaabjru5erkjggg==") no-repeat scroll 0 0 transparent;     height: 57px;     left: 0;     overflow: hidden;     width: 46px; } .carousel-arrow-right {     background: url("data:image/png;base64,ivborw0kggoaaaansuheugaaac4aaaa5cayaaabjahkuaaaekeleqvr42u2az0wuqrzfoaqowfdsolixf+w1suwtaerjj0anpczeeztgihinegsxig2ixhlib8jzo2kkiicxcpeu8iyiwel8gg/i22rfxenud28+emkvgbvb2xezb+dfzt3c/r9c+couljybd+abpikhee+bzbveaxgdx1an1ab+oaqoxb9ikng2vsiynggeqaafaazqgqr8ye4ycrdw8khooeop3445nze/fx8paf1bz9cuv6eir45jfufirpuaxug3lbu9i+9+c79toyr/f4bjias04o/zpfdnmvhbzgzbmhlvozdrbjtvfwvclmvm4l0isbimab1ba9rky6xw4ezvbmfido+k58uqwgvdyli+5n4pisnna0ey6ehvv3epdshcwka7mhxy6bt4txbb5t33fpznst3c51vadhpf3mc1eh8ybx2v8f5gflywzvxaumii84ux+m5een8yaa/q0tqehlqhwutq+iizwbzrfxmucillt739unqs310jxokuxel9ugqay50/cl9elnbbvaik71ctbwz8fxoyavpy3a9pmhv+e55pu/ev4qorsdz0hlmbzawdutij61twpdo6i1wqev5plqwtg2oxgvagrizmhfslts4kfwrfpyq8yiliwphhdfi9qtpgz1xhe+toivxzmnc+skyyym0ga0frju2ruxw0eq4w/fkz1xjnafgcrofoiibphxbrvmvhinvsbyuxmd4gmah0zc6kxakmh3dfooft8piw5nywewwalrnsnf8y9rkusnj84hxg3q8wgegga6jvdkkmt3bvohal8vedcacb09hwcogkdrbtr+acm5mo9xmq2holxgh9zzxsngepsohyzbvzkfezwrgqutub860ay5ionvjbr0rhsqkgajviaduz0fax2lzk4yrvdzywpuc8w8fuaghksco70rpsumlicxmwnm/ftzbja8fkylt64yjgbx/ael4wrgrnw58rjfzcbf1opznp9qakd5de+jt47husprpyeawk9yylgzq2853i5zecocxnakjtczekyd0/zci7lcmwuvp5scmcexuuqktwvutlaohcgtgpecmqdnexvqsrwkskjpzcsywwjvkcjnwcjrje0g34xhsmn+fo9iodho696y28pihosqzh7f1gdhge2nddwph+i57cs7utrclvbztxpg2hl3bv6rqcqwuxcqeurgtxfqvzwcy01byrq6xwuuxznkflmyoeq6kgdgwx3sjvlyifmryg9biurheu+/0dhlcnznc86aohclhupeqxxsax68b4fgbndnvucmrhwrdgplz7qgw0ko3fufxtuomo6lwk9ynlan431bv5b6dwutlnop4k/6i02yv2bin7c7s77hbqboxa9lb7r5ndtkflh3a/lmodih5ai4vg/333p8u//ybmey3ltgttehqici998kobr1y3j05ozv7wdsg9pnxlm7b2pghtkxyj5dz3txlmpxvxbhvbidytl786e/ygxjfr8d0fkz5r+ytdpggdh954prwsxti8fvtgzlutcsrtb7ij/gnqnnru0d37owaaaabjru5erkjggg==") no-repeat scroll 0 0 transparent;     height: 57px;     overflow: hidden;     right: 0;     width: 46px; } 

it looks has roles or maybe javascript can't find.

what going on here?

it's simple html , jquery:

create simple scrollbox:

<div id="scrollbar" style="width:980px;height:199px;overflow-y:hidden;overflow-x:hidden;"> loooooooooong content </div> 

and simple arrows:

<div class="scrollright" style="float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">right</div> <div class="scrollleft" style="float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">left</div> 

you can make looks better...

and after, add jquery/javascript code:

<script> $('.scrollleft').click(function () {     console.log('ok')     $('#scrollbar').animate({         scrollleft: '-=153'     }, 1000, 'easeoutquad'); }); $('.scrollright').click(function () {     console.log('ok')     $('#scrollbar').animate({         scrollleft: '+=153'     }, 1000, 'easeoutquad'); }); </script>