CSS   23
advanced slider base
Guest on 17th March 2023 12:09:40 AM


  1. .advanced-slider {
  2.         position: relative;
  3.         overflow: visible;
  4.         outline: none;
  5.         text-align: left;
  6.         font-family: Arial, Helvetica, sans-serif;
  7.         /*margin-left: auto;
  8.         margin-right: auto;*/
  9. }
  10.  
  11.  
  12. .advanced-slider * {
  13.         margin: 0;
  14.         padding: 0;
  15. }
  16.  
  17.  
  18. .advanced-slider.fulscreen {
  19.         max-width: 100% !important;
  20.         max-height: 100% !important;
  21. }
  22.  
  23.  
  24. .advanced-slider a {
  25.         position: static;
  26.         transition: none !important;
  27.         -moz-transition: none !important;
  28.         -webkit-transition: none !important;
  29.         -o-transition: none !important;
  30. }
  31.  
  32.  
  33. .advanced-slider img {
  34.         max-width: none;
  35.         max-height: none;
  36.         border: 0 none;
  37.         padding: 0;
  38.         margin: 0;
  39.         transition: none !important;
  40.         -moz-transition: none !important;
  41.         -webkit-transition: none !important;
  42.         -o-transition: none !important;
  43. }
  44.  
  45.  
  46. .advanced-slider .slider-main {
  47.         position: relative;
  48.         width: 100%;
  49.         height: 100%;
  50.         z-index: 1;
  51. }
  52.  
  53.  
  54. .advanced-slider .slide-wrapper {
  55.         position: relative;
  56.         overflow: visible;
  57.         width: 100%;
  58.         height: 100%;
  59.         z-index: 2;
  60. }
  61.  
  62.  
  63. .advanced-slider .slides {
  64.         position: absolute;
  65.         overflow: hidden;
  66.         margin: 0 !important;
  67.         padding: 0 !important;
  68.         list-style: none;
  69.         width: 100%;
  70.         height: 100%;
  71. }
  72.  
  73.  
  74. .advanced-slider .slide {
  75.         position: absolute;
  76.         overflow: hidden;
  77.         display: block;
  78.         margin: 0 !important;
  79.         padding: 0 !important;
  80.         width: 100%;
  81.         height: 100%;
  82.         visibility: hidden;    
  83.         list-style: none;
  84.         filter: alpha(opacity=100);
  85.         opacity: 1;
  86. }
  87.  
  88.  
  89. .advanced-slider .slide .image,
  90. .advanced-slider .slide .thumbnail,
  91. .advanced-slider .slide .caption,
  92. .advanced-slider .slide .html {
  93.         position: absolute;
  94. }
  95.  
  96.  
  97. .advanced-slider.webkit .slide .html {
  98.         overflow: hidden;
  99. }
  100.  
  101.  
  102. .advanced-slider .video-hidden-image {
  103.         display: none;
  104. }
  105.  
  106.  
  107. .advanced-slider iframe.video {
  108.         background-color: #000;
  109. }
  110.  
  111.  
  112. .advanced-slider .video-play-button {
  113.         display: block;
  114.         background-image: url(images/video_play.png);
  115.         background-position: center;
  116.         position: absolute;
  117.         width: 80px;
  118.         height: 80px;
  119.         top: 50%;
  120.         left: 50%;
  121.         margin-top: -40px;
  122.         margin-left: -40px;
  123. }
  124.  
  125.  
  126. .advanced-slider iframe {
  127.         display: block;
  128. }
  129.  
  130.  
  131. .advanced-slider.webkit .slide .html iframe,
  132. .advanced-slider.webkit .slide .layer iframe {
  133.         opacity: 0;
  134. }
  135.  
  136.  
  137. .advanced-slider.webkit .slide.transition .html iframe,
  138. .advanced-slider.webkit .slide.active .html iframe,
  139. .advanced-slider.webkit .slide.transition .layer.init iframe,
  140. .advanced-slider.webkit .slide.active .layer.init iframe {
  141.         opacity: 1;
  142. }
  143.  
  144.  
  145. .advanced-slider .slice-container {
  146.         position: absolute;
  147.         width: 100%;
  148.         height: 100%;
  149. }
  150.  
  151.  
  152. .advanced-slider .swipeable-container {
  153.         position: absolute;
  154.         width: 100%;
  155.         height: 100%;
  156.         overflow:hidden;
  157. }
  158.  
  159.  
  160. .advanced-slider .swipeable-container .slides {
  161.         -webkit-user-select: none;
  162.         -moz-user-select: none;
  163.         -o-user-select: none;
  164.         user-select: none;
  165. }
  166.  
  167.  
  168. .advanced-slider .swipeable-container .slides .selectable {
  169.         -webkit-user-select: auto;
  170.         -moz-user-select: auto;
  171.         -o-user-select: auto;
  172.         user-select: auto;
  173.         cursor: auto;
  174. }
  175.  
  176.  
  177. .advanced-slider .swipeable-container .grab {
  178.         cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default;
  179. }
  180.  
  181.  
  182. .advanced-slider .swipeable-container .grabbing {
  183.         cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default;
  184. }
  185.  
  186.  
  187. .advanced-slider .thumbnail-scroller .swipe {
  188.         -webkit-user-select: none;
  189.         -moz-user-select: none;
  190.         -o-user-select: none;
  191.         user-select: none;
  192. }
  193.  
  194.  
  195. .advanced-slider .thumbnail-scroller .grab {
  196.         cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default;
  197. }
  198.  
  199.  
  200. .advanced-slider .thumbnail-scroller .grabbing,
  201. .advanced-slider .thumbnail-scroller .grabbing a:hover,
  202. .advanced-slider .thumbnail-scroller .grabbing a:active,
  203. .advanced-slider .thumbnail-scroller .grabbing .lightbox-icon {
  204.         cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default;
  205. }
  206.  
  207.  
  208. .advanced-slider .layer {
  209.         position: absolute;
  210.         visibility: hidden;
  211.         padding: 4px;
  212.         box-sizing: border-box;
  213.         -moz-box-sizing: border-box;
  214.         -webkit-box-sizing: border-box;
  215. }
  216.  
  217.  
  218. .advanced-slider .layer.black {
  219.         color: #FFF;
  220.         background: rgb(0, 0, 0);
  221.         background: rgba(0, 0, 0, 0.7);
  222. }
  223.  
  224.  
  225. .advanced-slider .layer.white {
  226.         color: #000;
  227.         background: rgb(255, 255, 255);
  228.         background: rgba(255, 255, 255, 0.7);
  229. }
  230.  
  231.  
  232. .advanced-slider .layer.rounded {
  233.         border-radius: 10px;
  234. }
  235.  
  236.  
  237. .advanced-slider .slice {
  238.         display: block;
  239.         position: absolute;
  240. }
  241.  
  242.  
  243. .advanced-slider .preloader {
  244.         position: absolute;
  245.         background: url(images/preloader2.gif) no-repeat;
  246.         width: 62px;
  247.         height: 14px;
  248.         z-index: 15;
  249. }
  250.  
  251.  
  252. .advanced-slider .slide-arrows {
  253.         position: static;
  254.         display:none;
  255. }
  256.  
  257.  
  258. .advanced-slider .slide-arrows a {
  259.         position: absolute;
  260.         cursor: pointer;
  261. }
  262.  
  263.  
  264. .advanced-slider .lightbox-icon {
  265.         position: absolute;
  266.         width: 80px;
  267.         height: 80px;
  268.         top: 50%;
  269.         left: 50%;
  270.         margin-top: -40px;
  271.         margin-left: -40px;
  272.         cursor: pointer;
  273. }
  274.  
  275.  
  276. .advanced-slider .lightbox-icon.play {
  277.         background-image: url(images/lightbox_play.png);
  278. }
  279.  
  280.  
  281. .advanced-slider .lightbox-icon.magnifying {
  282.         background-image: url(images/lightbox_magnifying.png);
  283. }
  284.  
  285.  
  286. .advanced-slider .lightbox-icon.hyperlink {
  287.         background-image: url(images/lightbox_hyperlink.png);
  288. }
  289.  
  290.  
  291. .advanced-slider .slideshow-controls {
  292.         position: absolute;
  293.         cursor: pointer;
  294. }
  295.  
  296.  
  297. .advanced-slider .shadow {
  298.         position: absolute;
  299.         height: 94px;
  300.         margin-top: -50px;
  301.         z-index: 1;
  302. }
  303.  
  304.  
  305. .advanced-slider .shadow .shadow-left,
  306. .advanced-slider .shadow .shadow-right,
  307. .advanced-slider .shadow .shadow-middle {
  308.         float: left;
  309. }
  310.  
  311.  
  312. .advanced-slider .shadow .shadow-left {
  313.         float: left;
  314.         background: url(images/shadow_left.png);
  315.         width: 200px;
  316.         height: 94px;
  317. }
  318.  
  319.  
  320. .advanced-slider .shadow .shadow-right {
  321.         float: left;
  322.         background: url(images/shadow_right.png);
  323.         width: 200px;
  324.         height: 94px;
  325. }
  326.  
  327.  
  328. .advanced-slider .shadow .shadow-middle {
  329.         float: left;
  330.         background: url(images/shadow_middle.png) repeat-x;
  331.         height: 94px;
  332. }
  333.  
  334.  
  335. .advanced-slider .full-screen-controls {
  336.         background: url(images/fullscreen.png) no-repeat;
  337.         position: absolute;
  338.         width: 31px;
  339.         height: 27px;
  340.         top: 20px;
  341.         left: 20px;
  342.         cursor: pointer;
  343. }
  344.  
  345.  
  346. .advanced-slider .timer-animation {
  347.         position: absolute;
  348. }
  349.  
  350.  
  351. .advanced-slider canvas {
  352.         position: absolute;
  353.         display:none;
  354. }
  355.  
  356.  
  357. .advanced-slider .timer-animation .timer-animation-controls {
  358.         display:none;
  359.         position: absolute;
  360.         cursor: pointer;
  361.         width: 20px;
  362.         height: 20px;
  363.         top: 50%;
  364.         left: 50%;
  365.         margin-top: -10px;
  366.         margin-left: -10px;
  367. }
  368.  
  369.  
  370. .advanced-slider .timer-animation .timer-animation-controls {
  371.         background: url(images/playpause_small.png) no-repeat;
  372. }
  373.  
  374.  
  375. .advanced-slider .timer-animation.play .timer-animation-controls {
  376.         background-position: -20px 0;
  377. }
  378.  
  379.  
  380. .advanced-slider .timer-animation.pause .timer-animation-controls {
  381.         background-position: 0 0;
  382. }
  383.  
  384.  
  385. .advanced-slider .caption-container {
  386.         overflow: hidden;
  387.         position: absolute;
  388. }
  389.  
  390.  
  391. .advanced-slider .caption-container .wrapper {
  392.         position: absolute;
  393.         background-color: transparent;
  394.         border: 0 none;
  395.         margin: 0;
  396.         padding: 0;
  397.         box-shadow: none;
  398.         -moz-box-shadow: none;
  399.         -webkit-box-shadow: none;
  400. }
  401.  
  402.  
  403. .advanced-slider .caption-container .background {
  404.         position: absolute;
  405.         width: 100%;
  406.         height: 100%;
  407. }
  408.  
  409.  
  410. .advanced-slider .caption-container .caption {
  411.         width: 100%;
  412.         box-sizing: border-box;
  413.         -moz-box-sizing: border-box;
  414.         -webkit-box-sizing: border-box;
  415. }
  416.  
  417.  
  418. .advanced-slider .thumbnail-wrapper {
  419.         position: absolute;
  420. }
  421.  
  422.  
  423. .advanced-slider .thumbnail {
  424.         background-image: url(images/preloader.gif);
  425.         background-position: center;
  426.         background-repeat: no-repeat;
  427.         position: absolute;
  428.         overflow: hidden;
  429. }
  430.  
  431.  
  432. .advanced-slider .thumbnail-content {
  433.         background: none;
  434. }
  435.  
  436.  
  437. .advanced-slider .slide-buttons {
  438.         position: absolute;
  439.         z-index: 3;
  440. }
  441.  
  442.  
  443. .advanced-slider .slide-buttons .left,
  444. .advanced-slider .slide-buttons .right,
  445. .advanced-slider .slide-buttons .middle {
  446.         float: left;
  447. }
  448.  
  449.  
  450. .advanced-slider .slide-buttons a {
  451.         position: relative;
  452.         cursor: pointer;
  453.         float: left;
  454.         text-decoration: none;
  455.         text-align: center;
  456. }
  457.  
  458.  
  459. .advanced-slider .thumbnail-scroller {
  460.         position: absolute;
  461.         z-index: 2;
  462. }
  463.  
  464.  
  465. .advanced-slider .thumbnail-scroller .thumbnails-visible-container {
  466.         position: relative;
  467.         overflow: hidden;
  468. }
  469.  
  470.  
  471. .advanced-slider .thumbnail-scroller .thumbnails-container {
  472.         position: absolute;
  473.         overflow: visible;
  474.         top: 0;
  475.         left: 0;
  476.         list-style: none;
  477.         margin: 0;
  478.         padding: 0;
  479. }
  480.  
  481.  
  482. .advanced-slider .thumbnail-scroller .thumbnail-wrapper {
  483.         cursor: pointer;
  484.         list-style: none;
  485. }
  486.  
  487.  
  488. .advanced-slider .thumbnail-scroller .lightbox-icon {
  489.         position: absolute;
  490.         width: 30px;
  491.         height: 30px;
  492.         top: 50%;
  493.         left: 50%;
  494.         margin-top: -15px;
  495.         margin-left: -15px;
  496.         cursor: pointer;
  497. }
  498.  
  499.  
  500. .advanced-slider .thumbnail-scroller .lightbox-icon.play {
  501.         background-image: url(images/lightbox_play_small.png);
  502. }
  503.  
  504.  
  505. .advanced-slider .thumbnail-scroller .lightbox-icon.magnifying {
  506.         background-image: url(images/lightbox_magnifying_small.png);
  507. }
  508.  
  509.  
  510. .advanced-slider .thumbnail-scroller .lightbox-icon.hyperlink {
  511.         background-image: url(images/lightbox_hyperlink_small.png);
  512. }
  513.  
  514.  
  515. .advanced-slider .thumbnail .caption {
  516.         position: absolute;
  517.         width: 100%;
  518.         box-sizing: border-box;
  519.         -moz-box-sizing: border-box;
  520.         -webkit-box-sizing: border-box;
  521. }
  522.  
  523.  
  524. .advanced-slider .thumbnail .caption .background {
  525.         position: absolute;    
  526.         width: 100%;
  527.         height: 100%;
  528. }
  529.  
  530.  
  531. .advanced-slider .thumbnail .caption .content {
  532.         position: absolute;
  533.         width: 100%;
  534. }
  535.  
  536.  
  537. .advanced-slider .thumbnail-scroller .arrows a {
  538.         position: absolute;
  539.         cursor: pointer;
  540. }
  541.  
  542.  
  543. .advanced-slider .thumbnail-scroller .buttons {
  544.         position: absolute;
  545.         width: auto;
  546. }
  547.  
  548.  
  549. .advanced-slider .thumbnail-scroller .buttons a {
  550.         position: absolute;
  551.         cursor: pointer;
  552.         text-decoration: none;
  553. }
  554.  
  555.  
  556. .advanced-slider-tooltip {
  557.         position: absolute;
  558.         z-index: 9999;
  559. }
Raw Paste

Login or Register to edit or fork this paste. It's free.