1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script src="https://code.jquery.com/jquery-latest.js"></script> <script src='https://github-codes.github.io/mycodes/javascripts/slider.js'></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider').bxSlider({ ticker: true, tickerSpeed: 3000, tickerHover: true});}); </script> <style> #slider {list-style:none;padding:0px;} .slider-container {background:#115599;width:840px;height:158px;padding:1px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; overflow:hidden; margin:auto;} .newcon { width:840px; margin:auto; overflow:hidden} #slider img {width:208px;height:126px;margin:0px;display:inline-block;border: 1px solid #00ff00;} #slider li {width:210px} </style> <div class="newcon"> <div class="slider-container"> <ul id="slider"> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/uLrZapxt.jpg"/></a></li> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/YCL3P4vt.jpg"/></a></li> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/9GqSG9at.jpg"/></a></li> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/GwVdj0Ut.jpg"/></a></li> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/JcRaeRSt.jpg"/></a></li> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/gptb8xnt.jpg"/></a></li> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/gCr4ycDt.jpg"/></a></li> <li><a href='place link' title="place hover text" target="_blank"><img src="https://i.imgur.com/pyL40yft.jpg"/></a></li> </ul></div></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://dl.dropboxusercontent.com/s/2znfmyotmufc3sk/slider.js"></script> <script> $(document).ready(function(){ $('#slider').bxSlider({ ticker: true, tickerSpeed: 5000, tickerHover: true});}); </script> <style> #slider {list-style:none;padding:0px;margin:0;} .slider-container {background:#115599;width:690px;height:100px;padding:5px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;overflow:hidden;margin:0;} .newicon {width:790px;margin:0; overflow:hidden} #slider img {width:160px;height:100px;margin:0px;padding:0px;display:inline-block;border: 1px solid #FFFF00;} #slider li {width:170px} </style> <div class="newicon"> <div class="slider-container"> <ul id="slider"> <li><a href='http://i.imgur.com/Pq9Dexa.jpg' title="KERKYRA PALAIOKASTRITSA" target="_blank"><img src="http://i.imgur.com/Pq9Dexat.jpg"/></a></li> <li><a href='http://i.imgur.com/kbCkBYe.jpg' title="PAXOI" target="_blank"><img src="http://i.imgur.com/kbCkBYet.jpg"/></a></li> <li><a href='http://i.imgur.com/gCr4ycD.jpg' title="LEYKADA PORTO KATSIKI" target="_blank"><img src="http://i.imgur.com/gCr4ycDt.jpg"/></a></li> <li><a href='http://i.imgur.com/JcRaeRS.jpg' title="ITHAKI" target="_blank"><img src="http://i.imgur.com/JcRaeRSt.jpg"/></a></li> <li><a href='http://i.imgur.com/XMS6PHs.jpg' title="KEFALONIA" target="_blank"><img src="http://i.imgur.com/XMS6PHst.jpg"/></a></li> <li><a href='http://i.imgur.com/I9SFA0s.jpg' title="ZAKYNTHOS" target="_blank"><img src="http://i.imgur.com/I9SFA0st.jpg"/></a></li> <li><a href='http://i.imgur.com/6mZpZ0F.jpg' title="SKOPELOS" target="_blank"><img src="http://i.imgur.com/6mZpZ0Ft.jpg"/></a></li> <li><a href='http://i.imgur.com/9GqSG9a.jpg' title="ALONNISOS" target="_blank"><img src="http://i.imgur.com/9GqSG9at.jpg"/></a></li> </ul></div></div> |
