EduardET

Slider css code

Jan 4th, 2018
107
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.23 KB | None | 0 0
  1. .slideshow {
  2.     display: block;
  3.     position: relative;
  4.     z-index: 0;
  5. }
  6. .slideshow-images {
  7.     display: block;
  8.     overflow: hidden;
  9.     position: relative;
  10. }      
  11. .slideshow-images img {
  12.     display: block;
  13.     position: absolute;
  14.     z-index: 1;
  15. }      
  16. .slideshow-thumbnails {
  17.     overflow: hidden;
  18. }
  19.  
  20. .slideshow {
  21.     width: 664px;
  22.     height: 504px;
  23.     margin: 0 auto;
  24.     background: url("enter the back.png URL from your media library") no-repeat scroll 0 0 transparent;
  25. }
  26. .slideshow a img {
  27.     border: 0;
  28. }
  29.  
  30. .slideshow-images {
  31.     width: 640px;
  32.     height: 480px;
  33.     left: 12px;
  34.     top: 12px;
  35. }      
  36. .slideshow-images-visible {
  37.     opacity: 1;
  38. }  
  39. .slideshow-images-prev {
  40.     opacity: 0;
  41. }
  42. .slideshow-images-next {
  43.     opacity: 0;
  44. }
  45. .slideshow-images img {
  46.     float: left;
  47.     left: 0;
  48.     top: 0;
  49.     position: static;
  50. }
  51.  
  52. .slideshow-controller {
  53.     background: url(../images/controller.png) no-repeat;
  54.     height: 42px;
  55.     left: 50%;
  56.     margin: -21px 0 0 -119px;
  57.     overflow: hidden;
  58.     position: absolute;
  59.     bottom: 50%;
  60.     width: 238px;
  61.     z-index: 10000;
  62. }
  63. .slideshow-controller * {
  64.     margin: 0;
  65.     padding: 0;
  66. }
  67. .slideshow-controller-hidden {
  68.     opacity: 0;
  69. }
  70. .slideshow-controller-visible {
  71.     opacity: 1;
  72. }
  73. .slideshow-controller a {
  74.     cursor: pointer;
  75.     display: block;
  76.     height: 18px;
  77.     overflow: hidden;
  78.     position: absolute;
  79.     top: 12px;
  80. }
  81. .slideshow-controller a.active {
  82.     background-position: 0 18px;
  83. }
  84. .slideshow-controller li {
  85.     list-style: none;
  86. }
  87. .slideshow-controller li.first a {
  88.     background-image: url(enter the URL of controller-first.gif file from the media library);
  89.     left: 33px;
  90.     width: 19px;
  91. }
  92. .slideshow-controller li.last a {
  93.     background-image: url(enter the URL of controller-last.gif file from the media library);
  94.     left: 186px;
  95.     width: 19px;
  96. }
  97. .slideshow-controller li.next a {
  98.     background-image: url(enter the URL of controller-next.gif file from the media library);
  99.     left: 145px;
  100.     width: 28px;
  101. }
  102. .slideshow-controller li.pause a {
  103.     background-image: url(enter the URL of controller-pause.gif file from the media library);
  104.     left: 109px;
  105.     width: 20px;
  106. }
  107. .slideshow-controller li.play a {
  108.     background-position: 20px 0;
  109. }
  110. .slideshow-controller li.play a.active {
  111.     background-position: 20px 18px;
  112. }
  113. .slideshow-controller li.prev a {
  114.     background-image: url(enter the URL of controller-prev.gif file from the media library);
  115.     left: 65px;
  116.     width: 28px;
  117. }
Advertisement
Add Comment
Please, Sign In to add comment