Advertisement
widgetsforblogs

SLIDESHOW WITH THUMBNAILS-2

Sep 7th, 2022
50
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.69 KB | Source Code | 0 0
  1. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
  2. <TITLE>SLIDESHOW WITH THUMBNAILS-2</TITLE>
  3. <style>
  4. .slider {background: #115595;width: 960px;height: 724px;padding: 1px;position:relative; top: 0px;overflow: hidden;}
  5. .images {background: #115595;width: 100%;height: 100%;transition: background .5s linear;}
  6. input[type='radio'] {-webkit-appearance: none;appearance: none;background-color: #115595;  background-size: 94px 59px;width: 94px;height: 59px; margin: 1px;cursor: pointer;position: relative;float: left;top: 601px;}
  7. input[type='radio']:checked {content: ''; border: solid 1px #4EFF44; box-shadow: none;  -webkit-filter: none;}
  8. input[type='radio']:hover{border: solid 1px #4EFF44; -webkit-filter: none; transform: scale(1.05); z-index: 9999;}
  9. .slide1 {background: url(http://i.imgur.com/fiVofHIt.jpg);}
  10. .slide2 {background: url(http://i.imgur.com/gCr4ycDt.jpg);}
  11. .slide3 {background: url(http://i.imgur.com/qrKer61t.jpg);}
  12. .slide4 {background: url(http://i.imgur.com/Pq9Dexat.jpg);}
  13. .slide5 {background: url(http://i.imgur.com/oSC4D7Rt.jpg);}
  14. .slide6 {background: url(http://i.imgur.com/xHwALvDt.jpg);}
  15. .slide7 {background: url(http://i.imgur.com/3Jk6C5nt.jpg);}
  16. .slide8 {background: url(http://i.imgur.com/gptb8xnt.jpg);}
  17. .slide9 {background: url(http://i.imgur.com/H2PNDWBt.jpg);}
  18. .slide10 {background: url(http://i.imgur.com/2OIqV1bt.jpg);}
  19. .slide11 {background: url(http://i.imgur.com/1l2cZBCt.jpg);}
  20. .slide12 {background: url(http://i.imgur.com/qMMDdhYt.jpg);}
  21. .slide13 {background: url(http://i.imgur.com/FURuBVWt.jpg);}
  22. .slide14 {background: url(http://i.imgur.com/tZsqBn7t.jpg);}
  23. .slide15 {background: url(http://i.imgur.com/n5IesXRt.jpg);}
  24. .slide16 {background: url(http://i.imgur.com/7X4wjWSt.jpg);}
  25. .slide17 {background: url(http://i.imgur.com/0M4jTZTt.jpg);}
  26. .slide18 {background: url(http://i.imgur.com/C83SL17t.jpg);}
  27. .slide19 {background: url(http://i.imgur.com/QWjXsdPt.jpg);}
  28. .slide20 {background: url(http://i.imgur.com/15wHDCct.jpg);}
  29. .slide1:checked ~ .images {background: url(http://i.imgur.com/fiVofHIh.jpg);}
  30. .slide2:checked ~ .images {background: url(http://i.imgur.com/gCr4ycDh.jpg);}
  31. .slide3:checked ~ .images {background: url(http://i.imgur.com/qrKer61h.jpg);}
  32. .slide4:checked ~ .images {background: url(http://i.imgur.com/Pq9Dexah.jpg);}
  33. .slide5:checked ~ .images {background: url(http://i.imgur.com/oSC4D7Rh.jpg);}
  34. .slide6:checked ~ .images {background: url(http://i.imgur.com/xHwALvDh.jpg);}
  35. .slide7:checked ~ .images {background: url(http://i.imgur.com/3Jk6C5nh.jpg);}
  36. .slide8:checked ~ .images {background: url(http://i.imgur.com/gptb8xnh.jpg);}
  37. .slide9:checked ~ .images {background: url(http://i.imgur.com/H2PNDWBh.jpg);}
  38. .slide10:checked ~ .images {background: url(http://i.imgur.com/2OIqV1bh.jpg);}
  39. .slide11:checked ~ .images {background: url(http://i.imgur.com/1l2cZBCh.jpg);}
  40. .slide12:checked ~ .images {background: url(http://i.imgur.com/qMMDdhYh.jpg);}
  41. .slide13:checked ~ .images {background: url(http://i.imgur.com/FURuBVWh.jpg);}
  42. .slide14:checked ~ .images {background: url(http://i.imgur.com/tZsqBn7h.jpg);}
  43. .slide15:checked ~ .images {background: url(http://i.imgur.com/n5IesXRh.jpg);}
  44. .slide16:checked ~ .images {background: url(http://i.imgur.com/7X4wjWSh.jpg);}
  45. .slide17:checked ~ .images {background: url(http://i.imgur.com/0M4jTZTh.jpg);}
  46. .slide18:checked ~ .images {background: url(http://i.imgur.com/C83SL17h.jpg);}
  47. .slide19:checked ~ .images {background: url(http://i.imgur.com/QWjXsdPh.jpg);}
  48. .slide20:checked ~ .images {background: url(http://i.imgur.com/15wHDCch.jpg);}
  49. </style>
  50. <div class='slider'>
  51. <input checked='' class='slide1' name='thumbnail' type='radio' />
  52. <input class='slide2' name='thumbnail' type='radio' />
  53. <input class='slide3' name='thumbnail' type='radio' />
  54. <input class='slide4' name='thumbnail' type='radio' />
  55. <input class='slide5' name='thumbnail' type='radio' />
  56. <input class='slide6' name='thumbnail' type='radio' />
  57. <input class='slide7' name='thumbnail' type='radio' />
  58. <input class='slide8' name='thumbnail' type='radio' />
  59. <input class='slide9' name='thumbnail' type='radio' />
  60. <input class='slide10' name='thumbnail' type='radio' />
  61. <input class='slide11' name='thumbnail' type='radio' />
  62. <input class='slide12' name='thumbnail' type='radio' />
  63. <input class='slide13' name='thumbnail' type='radio' />
  64. <input class='slide14' name='thumbnail' type='radio' />
  65. <input class='slide15' name='thumbnail' type='radio' />
  66. <input class='slide16' name='thumbnail' type='radio' />
  67. <input class='slide17' name='thumbnail' type='radio' />
  68. <input class='slide18' name='thumbnail' type='radio' />
  69. <input class='slide19' name='thumbnail' type='radio' />
  70. <input class='slide20' name='thumbnail' type='radio' />
  71. <div class='images'></div>
  72. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement