You are here

Home » API reference » jCarousel 8.5

jcarousel-default.css in jCarousel 8.5

Same filename and directory in other branches
  1. 8.3 skins/default/jcarousel-default.css
  2. 6.2 skins/default/jcarousel-default.css
  3. 7.3 skins/default/jcarousel-default.css
  4. 7.2 skins/default/jcarousel-default.css
/**
 * A simple sample carousel skin.
 *
 * This skin includes a sample arrows.svg file that may be edited with the free
 * illustration application InkScape (http://inkscape.org).
 *
 * CSS and icons by Nathan Haug.
 */
.jcarousel-wrapper.jcarousel-skin-default {
  margin: 20px auto;
  position: relative;
  border: 10px solid #fff;
  /*
  (4 * width: 150px) + (3 * margin-right: 1px) = 603px
  */
  width: 603px;
  max-width: 95%;
  height: 100px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 2px #999;
  -moz-box-shadow: 0 0 2px #999;
  box-shadow: 0 0 2px #999;
}

.jcarousel-wrapper.jcarousel-skin-default.jcarousel-vertical {
  height: 404px;
  width: 150px;
  margin: 50px auto;
}

/* Sizes */
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-1 {
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-2 {
  width: 301px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-3 {
  width: 452px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-4 {
  width: 603px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-5 {
  width: 754px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-6 {
  width: 905px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-7 {
  width: 1056px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-8 {
  width: 1207px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-9 {
  width: 1358px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-10 {
  width: 1509px;
}


.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-1.jcarousel-vertical {
  height: 100px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-2.jcarousel-vertical {
  height: 201px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-3.jcarousel-vertical {
  height: 302px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-4.jcarousel-vertical {
  height: 403px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-5.jcarousel-vertical {
  height: 504px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-6.jcarousel-vertical {
  height: 605px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-7.jcarousel-vertical {
  height: 706px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-8.jcarousel-vertical {
  height: 807px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-9.jcarousel-vertical {
  height: 908px;
  width: 150px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-10.jcarousel-vertical {
  height: 1009px;
  width: 150px;
}

/** Carousel **/

.jcarousel-skin-default .jcarousel {
  position: relative;
  overflow: hidden;
  height: inherit;
}

.jcarousel-skin-default .jcarousel ul {
  width: 20000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jcarousel-skin-default .jcarousel li {
  float: left;
  width: 150px;
  height: 100px;
  margin-right: 1px;
}
.jcarousel-wrapper.jcarousel-skin-default.jcarousel-vertical .jcarousel li {
  float: none;
  margin-bottom: 1px;
}

.jcarousel-skin-default .jcarousel img {
  display: block;
  max-width: 100%;
  height: auto !important;
  /*max-height: 100px;*/
}

.jcarousel-skin-default .jcarousel .loading {
  text-align: center;
  line-height: 90px; /* Fake vertical aligning */
}

/** Carousel Controls **/

.jcarousel-skin-default .jcarousel-control-prev,
.jcarousel-skin-default .jcarousel-control-next {
  position: absolute;
  top: 35px;
  width: 30px;
  height: 30px;
  text-align: center;
  background: #4E443C;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 1px #000;
  font: 24px/27px Arial, sans-serif;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 0 0 2px #999;
  -moz-box-shadow: 0 0 2px #999;
  box-shadow: 0 0 2px #999;
}

.jcarousel-skin-default .jcarousel-control-prev {
  left: -50px;
}
.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-prev {
  left: 60px;
  top: -50px;
}

.jcarousel-skin-default .jcarousel-control-next {
  right: -50px;
}

.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  right: 60px;
  top: 420px;
}

.jcarousel-visible-1.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 120px;
}
.jcarousel-visible-2.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 220px;
}
.jcarousel-visible-3.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 323px;
}
.jcarousel-visible-4.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 422px;
}
.jcarousel-visible-5.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 525px;
}
.jcarousel-visible-6.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 624px;
}
.jcarousel-visible-7.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 725px;
}
.jcarousel-visible-8.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 826px;
}
.jcarousel-visible-9.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 927px;
}
.jcarousel-visible-10.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {
  top: 1028px;
}

.jcarousel-skin-default .jcarousel-control-prev:after {
  content: '\2039';
}
.jcarousel-skin-default a.jcarousel-control-prev:focus,
.jcarousel-skin-default a.jcarousel-control-prev:active,
.jcarousel-skin-default a.jcarousel-control-prev:hover {
  text-decoration: none;
}
.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-prev:after {
  /*CSS 3*/
  transform: rotate(90deg);
  /* Safari */
  -webkit-transform: rotate(90deg);
  /* Firefox */
  -moz-transform: rotate(90deg);
  /* IE */
  -ms-transform: rotate(90deg);
  /* Opera */
  -o-transform: rotate(90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display: inline-block;
  margin-top: 2px;
  margin-left: 4px;
}

.jcarousel-skin-default .jcarousel-control-next:after {
  content: '\203A';
}
.jcarousel-skin-default a.jcarousel-control-next:focus,
.jcarousel-skin-default a.jcarousel-control-next:active,
.jcarousel-skin-default a.jcarousel-control-next:hover {
  text-decoration: none;
}
.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next:after {
  /*CSS 3*/
  transform: rotate(90deg);
  /* Safari */
  -webkit-transform: rotate(90deg);
  /* Firefox */
  -moz-transform: rotate(90deg);
  /* IE */
  -ms-transform: rotate(90deg);
  /* Opera */
  -o-transform: rotate(90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display: inline-block;
  margin-top: 2px;
  margin-left: 4px;
}

.jcarousel-skin-default .jcarousel-control-prev:hover span,
.jcarousel-skin-default .jcarousel-control-next:hover span {
  display: block;
}

.jcarousel-skin-default .jcarousel-control-prev.inactive,
.jcarousel-skin-default .jcarousel-control-next.inactive {
  opacity: .5;
  cursor: default;
}

File

skins/default/jcarousel-default.css
View source 
  1. 

  2. /**

  3.  * A simple sample carousel skin.

  4.  *

  5.  * This skin includes a sample arrows.svg file that may be edited with the free

  6.  * illustration application InkScape (http://inkscape.org).

  7.  *

  8.  * CSS and icons by Nathan Haug.

  9.  */

  10. .jcarousel-wrapper.jcarousel-skin-default {

  11.   margin: 20px auto;

  12.   position: relative;

  13.   border: 10px solid #fff;

  14.   /*

  15.   (4 * width: 150px) + (3 * margin-right: 1px) = 603px

  16.   */

  17.   width: 603px;

  18.   max-width: 95%;

  19.   height: 100px;

  20.   -webkit-border-radius: 5px;

  21.   -moz-border-radius: 5px;

  22.   border-radius: 5px;

  23.   -webkit-box-shadow: 0 0 2px #999;

  24.   -moz-box-shadow: 0 0 2px #999;

  25.   box-shadow: 0 0 2px #999;

  26. }

  27. 

  28. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-vertical {

  29.   height: 404px;

  30.   width: 150px;

  31.   margin: 50px auto;

  32. }

  33. 

  34. /* Sizes */

  35. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-1 {

  36.   width: 150px;

  37. }

  38. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-2 {

  39.   width: 301px;

  40. }

  41. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-3 {

  42.   width: 452px;

  43. }

  44. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-4 {

  45.   width: 603px;

  46. }

  47. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-5 {

  48.   width: 754px;

  49. }

  50. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-6 {

  51.   width: 905px;

  52. }

  53. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-7 {

  54.   width: 1056px;

  55. }

  56. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-8 {

  57.   width: 1207px;

  58. }

  59. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-9 {

  60.   width: 1358px;

  61. }

  62. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-10 {

  63.   width: 1509px;

  64. }

  65. 

  66. 

  67. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-1.jcarousel-vertical {

  68.   height: 100px;

  69.   width: 150px;

  70. }

  71. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-2.jcarousel-vertical {

  72.   height: 201px;

  73.   width: 150px;

  74. }

  75. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-3.jcarousel-vertical {

  76.   height: 302px;

  77.   width: 150px;

  78. }

  79. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-4.jcarousel-vertical {

  80.   height: 403px;

  81.   width: 150px;

  82. }

  83. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-5.jcarousel-vertical {

  84.   height: 504px;

  85.   width: 150px;

  86. }

  87. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-6.jcarousel-vertical {

  88.   height: 605px;

  89.   width: 150px;

  90. }

  91. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-7.jcarousel-vertical {

  92.   height: 706px;

  93.   width: 150px;

  94. }

  95. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-8.jcarousel-vertical {

  96.   height: 807px;

  97.   width: 150px;

  98. }

  99. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-9.jcarousel-vertical {

  100.   height: 908px;

  101.   width: 150px;

  102. }

  103. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-visible-10.jcarousel-vertical {

  104.   height: 1009px;

  105.   width: 150px;

  106. }

  107. 

  108. /** Carousel **/

  109. 

  110. .jcarousel-skin-default .jcarousel {

  111.   position: relative;

  112.   overflow: hidden;

  113.   height: inherit;

  114. }

  115. 

  116. .jcarousel-skin-default .jcarousel ul {

  117.   width: 20000em;

  118.   position: relative;

  119.   list-style: none;

  120.   margin: 0;

  121.   padding: 0;

  122. }

  123. 

  124. .jcarousel-skin-default .jcarousel li {

  125.   float: left;

  126.   width: 150px;

  127.   height: 100px;

  128.   margin-right: 1px;

  129. }

  130. .jcarousel-wrapper.jcarousel-skin-default.jcarousel-vertical .jcarousel li {

  131.   float: none;

  132.   margin-bottom: 1px;

  133. }

  134. 

  135. .jcarousel-skin-default .jcarousel img {

  136.   display: block;

  137.   max-width: 100%;

  138.   height: auto !important;

  139.   /*max-height: 100px;*/

  140. }

  141. 

  142. .jcarousel-skin-default .jcarousel .loading {

  143.   text-align: center;

  144.   line-height: 90px; /* Fake vertical aligning */

  145. }

  146. 

  147. /** Carousel Controls **/

  148. 

  149. .jcarousel-skin-default .jcarousel-control-prev,

  150. .jcarousel-skin-default .jcarousel-control-next {

  151.   position: absolute;

  152.   top: 35px;

  153.   width: 30px;

  154.   height: 30px;

  155.   text-align: center;

  156.   background: #4E443C;

  157.   color: #fff;

  158.   text-decoration: none;

  159.   text-shadow: 0 0 1px #000;

  160.   font: 24px/27px Arial, sans-serif;

  161.   -webkit-border-radius: 30px;

  162.   -moz-border-radius: 30px;

  163.   border-radius: 30px;

  164.   -webkit-box-shadow: 0 0 2px #999;

  165.   -moz-box-shadow: 0 0 2px #999;

  166.   box-shadow: 0 0 2px #999;

  167. }

  168. 

  169. .jcarousel-skin-default .jcarousel-control-prev {

  170.   left: -50px;

  171. }

  172. .jcarousel-skin-default.jcarousel-vertical .jcarousel-control-prev {

  173.   left: 60px;

  174.   top: -50px;

  175. }

  176. 

  177. .jcarousel-skin-default .jcarousel-control-next {

  178.   right: -50px;

  179. }

  180. 

  181. .jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  182.   right: 60px;

  183.   top: 420px;

  184. }

  185. 

  186. .jcarousel-visible-1.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  187.   top: 120px;

  188. }

  189. .jcarousel-visible-2.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  190.   top: 220px;

  191. }

  192. .jcarousel-visible-3.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  193.   top: 323px;

  194. }

  195. .jcarousel-visible-4.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  196.   top: 422px;

  197. }

  198. .jcarousel-visible-5.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  199.   top: 525px;

  200. }

  201. .jcarousel-visible-6.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  202.   top: 624px;

  203. }

  204. .jcarousel-visible-7.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  205.   top: 725px;

  206. }

  207. .jcarousel-visible-8.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  208.   top: 826px;

  209. }

  210. .jcarousel-visible-9.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  211.   top: 927px;

  212. }

  213. .jcarousel-visible-10.jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next {

  214.   top: 1028px;

  215. }

  216. 

  217. .jcarousel-skin-default .jcarousel-control-prev:after {

  218.   content: '\2039';

  219. }

  220. .jcarousel-skin-default a.jcarousel-control-prev:focus,

  221. .jcarousel-skin-default a.jcarousel-control-prev:active,

  222. .jcarousel-skin-default a.jcarousel-control-prev:hover {

  223.   text-decoration: none;

  224. }

  225. .jcarousel-skin-default.jcarousel-vertical .jcarousel-control-prev:after {

  226.   /*CSS 3*/

  227.   transform: rotate(90deg);

  228.   /* Safari */

  229.   -webkit-transform: rotate(90deg);

  230.   /* Firefox */

  231.   -moz-transform: rotate(90deg);

  232.   /* IE */

  233.   -ms-transform: rotate(90deg);

  234.   /* Opera */

  235.   -o-transform: rotate(90deg);

  236.   /* Internet Explorer */

  237.   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  238.   display: inline-block;

  239.   margin-top: 2px;

  240.   margin-left: 4px;

  241. }

  242. 

  243. .jcarousel-skin-default .jcarousel-control-next:after {

  244.   content: '\203A';

  245. }

  246. .jcarousel-skin-default a.jcarousel-control-next:focus,

  247. .jcarousel-skin-default a.jcarousel-control-next:active,

  248. .jcarousel-skin-default a.jcarousel-control-next:hover {

  249.   text-decoration: none;

  250. }

  251. .jcarousel-skin-default.jcarousel-vertical .jcarousel-control-next:after {

  252.   /*CSS 3*/

  253.   transform: rotate(90deg);

  254.   /* Safari */

  255.   -webkit-transform: rotate(90deg);

  256.   /* Firefox */

  257.   -moz-transform: rotate(90deg);

  258.   /* IE */

  259.   -ms-transform: rotate(90deg);

  260.   /* Opera */

  261.   -o-transform: rotate(90deg);

  262.   /* Internet Explorer */

  263.   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  264.   display: inline-block;

  265.   margin-top: 2px;

  266.   margin-left: 4px;

  267. }

  268. 

  269. .jcarousel-skin-default .jcarousel-control-prev:hover span,

  270. .jcarousel-skin-default .jcarousel-control-next:hover span {

  271.   display: block;

  272. }

  273. 

  274. .jcarousel-skin-default .jcarousel-control-prev.inactive,

  275. .jcarousel-skin-default .jcarousel-control-next.inactive {

  276.   opacity: .5;

  277.   cursor: default;

  278. }