CSS 22
Flexslider.css Guest on 6th February 2021 10:04:31 AM
  1. /*
  2.  * jQuery FlexSlider v2.0
  3.  * http://www.woothemes.com/flexslider/
  4.  *
  5.  * Copyright 2012 WooThemes
  6.  * Free to use under the GPLv2 license.
  7.  * http://www.gnu.org/licenses/gpl-2.0.html
  8.  *
  9.  * Contributing author: Tyler Smith (@mbmufffin)
  10.  */
  11.  
  12.  
  13. /* Browser Resets */
  14. .flex-container a:active,
  15. .flexslider a:active,
  16. .flex-container a:focus,
  17. .flexslider a:focus  {outline: none;}
  18. .slides,
  19. .flex-control-nav,
  20. .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
  21.  
  22. /* FlexSlider Necessary Styles
  23. *********************************/
  24. .flexslider {margin: 0; padding: 0;}
  25. .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
  26. .flexslider .slides img {width: 100%; display: block;}
  27. .flex-pauseplay span {text-transform: capitalize;}
  28.  
  29. /* Clearfix for the .slides element */
  30. .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
  31. html[xmlns] .slides {display: block;}
  32. * html .slides {height: 1%;}
  33.  
  34. /* No JavaScript Fallback */
  35. /* If you are not using another script, such as Modernizr, make sure you
  36.  * include js that eliminates this class on page load */
  37. .no-js .slides > li:first-child {display: block;}
  38.  
  39.  
  40. /* FlexSlider Default Theme
  41. *********************************/
  42. .flexslider {margin: 0 0 60px; background: #fff;/* border: 4px solid #fff;*/ position: relative;/* -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2);*/ zoom: 1;}
  43. .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
  44. .loading .flex-viewport {max-height: 300px;}
  45. .flexslider .slides {zoom: 1;}
  46.  
  47. .carousel li {margin-right: 5px}
  48.  
  49.  
  50. /* Direction Nav */
  51. .flex-direction-nav {display: none;} /*.flex-direction-nav {*height: 0;}*/
  52. .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
  53. .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
  54. .flex-direction-nav .flex-prev {left: -36px;}
  55. .flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
  56. .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
  57. .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
  58. .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
  59.  
  60. /* Control Nav */
  61. .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
  62. .flex-control-nav li {margin: 0 3px; display: inline-block; zoom: 1; *display: inline;}
  63. .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(190,190,192,0.8); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
  64. .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
  65. .flex-control-paging li a.flex-active { background: #000; /*background: rgba(0,0,0,0.9); */background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);; cursor: default; }
  66.  
  67. .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
  68. .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
  69. .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
  70. .flex-control-thumbs img:hover {opacity: 1;}
  71. .flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
  72.  
  73. @media screen and (max-width: 860px) {
  74.   .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  75.   .flex-direction-nav .flex-next {opacity: 1; right: 0;}
  76. }
  77.  
  78. @media only screen and (max-width: 767px) {
  79.  
  80.     .flex-control-nav {text-align: left;}
  81.     .flex-control-nav li {margin: 0 20px 0 0; display: inline-block; zoom: 1; *display: inline;}
  82.  
  83. }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

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