You are here

Home » API reference » jCarousel 8.3

jcarousel-default.css in jCarousel 8.3

Same filename and directory in other branches
  1. 8.5 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-skin-default {
  text-align: center;
}

.jcarousel-skin-default .jcarousel-container-horizontal {
  width: 440px;
  height: 102px;
  padding: 20px 40px;
  margin: auto;
}

.jcarousel-skin-default .jcarousel-container-vertical {
  width: 102px;
  height: 440px;
  padding: 40px 20px;
  margin: auto;
}

.jcarousel-skin-default .jcarousel-clip,
.jcarousel-skin-default .jcarousel-clip-vertical,
.jcarousel-skin-default .jcarousel-clip-horizontal {
  overflow: hidden;
}

.jcarousel-skin-default .jcarousel-clip-horizontal {
  width: 440px;
}

.jcarousel-skin-default .jcarousel-clip-vertical {
  height: 440px;
}

.jcarousel-skin-default .jcarousel-item {
  padding: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #CCC;
  list-style: none;
  background: #fff none;
}

.jcarousel-skin-default .jcarousel-item-horizontal {
  margin: 0 4px;
}

.jcarousel-skin-default .jcarousel-item-vertical {
  margin: 4px 0;
}

.jcarousel-skin-default .jcarousel-item-placeholder {
  background: #fff url(throbber.gif) no-repeat center center;
  color: #000;
}

/**
 * Buttons
 */
.jcarousel-skin-default .jcarousel-next,
.jcarousel-skin-default .jcarousel-prev {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url(arrows.png);
}

.jcarousel-skin-default .jcarousel-next-disabled,
.jcarousel-skin-default .jcarousel-prev-disabled {
  display: none;
}

/**
 * Horizontal Buttons
 */
.jcarousel-skin-default .jcarousel-prev-horizontal {
  position: absolute;
  top: 55px;
  left: 10px;
  background-position: 0 0;
}
.jcarousel-skin-default .jcarousel-prev-horizontal:hover {
  background-position: -32px 0;
}
.jcarousel-skin-default .jcarousel-prev-horizontal:active {
  background-position: -64px 0;
}

.jcarousel-skin-default .jcarousel-next-horizontal {
  position: absolute;
  top: 55px;
  right: 10px;
  background-position: 0 -32px;
}
.jcarousel-skin-default .jcarousel-next-horizontal:hover {
  background-position: -32px -32px;
}
.jcarousel-skin-default .jcarousel-next-horizontal:active {
  background-position: -64px -32px;
}

/**
 * Vertical Buttons
 */
.jcarousel-skin-default .jcarousel-prev-vertical {
  position: absolute;
  top: 10px;
  left: 55px;
  background-position: 0 -64px;
}
.jcarousel-skin-default .jcarousel-prev-vertical:hover {
  background-position: -32px -64px;
}
.jcarousel-skin-default .jcarousel-prev-vertical:active {
  background-position: -64px -64px;
}

.jcarousel-skin-default .jcarousel-next-vertical {
  position: absolute;
  bottom: 10px;
  left: 55px;
  background-position: 0 -96px;
}
.jcarousel-skin-default .jcarousel-next-vertical:hover {
  background-position: -32px -96px;
}
.jcarousel-skin-default .jcarousel-next-vertical:active {
  background-position: -64px -96px;
}

.jcarousel-skin-default .jcarousel-navigation {
  margin: 0;
  padding: 0;
}

.jcarousel-skin-default .jcarousel-navigation li {
  display: inline;
  margin: 0 2px 0 0;
  padding: 0;
  background: none;
}

.jcarousel-skin-default .jcarousel-navigation li.active a {
  font-weight: bold;
  text-decoration: none;
}

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. 

  11. .jcarousel-skin-default {

  12.   text-align: center;

  13. }

  14. 

  15. .jcarousel-skin-default .jcarousel-container-horizontal {

  16.   width: 440px;

  17.   height: 102px;

  18.   padding: 20px 40px;

  19.   margin: auto;

  20. }

  21. 

  22. .jcarousel-skin-default .jcarousel-container-vertical {

  23.   width: 102px;

  24.   height: 440px;

  25.   padding: 40px 20px;

  26.   margin: auto;

  27. }

  28. 

  29. .jcarousel-skin-default .jcarousel-clip,

  30. .jcarousel-skin-default .jcarousel-clip-vertical,

  31. .jcarousel-skin-default .jcarousel-clip-horizontal {

  32.   overflow: hidden;

  33. }

  34. 

  35. .jcarousel-skin-default .jcarousel-clip-horizontal {

  36.   width: 440px;

  37. }

  38. 

  39. .jcarousel-skin-default .jcarousel-clip-vertical {

  40.   height: 440px;

  41. }

  42. 

  43. .jcarousel-skin-default .jcarousel-item {

  44.   padding: 0;

  45.   width: 100px;

  46.   height: 100px;

  47.   overflow: hidden;

  48.   border: 1px solid #CCC;

  49.   list-style: none;

  50.   background: #fff none;

  51. }

  52. 

  53. .jcarousel-skin-default .jcarousel-item-horizontal {

  54.   margin: 0 4px;

  55. }

  56. 

  57. .jcarousel-skin-default .jcarousel-item-vertical {

  58.   margin: 4px 0;

  59. }

  60. 

  61. .jcarousel-skin-default .jcarousel-item-placeholder {

  62.   background: #fff url(throbber.gif) no-repeat center center;

  63.   color: #000;

  64. }

  65. 

  66. /**

  67.  * Buttons

  68.  */

  69. .jcarousel-skin-default .jcarousel-next,

  70. .jcarousel-skin-default .jcarousel-prev {

  71.   display: block;

  72.   width: 32px;

  73.   height: 32px;

  74.   background-image: url(arrows.png);

  75. }

  76. 

  77. .jcarousel-skin-default .jcarousel-next-disabled,

  78. .jcarousel-skin-default .jcarousel-prev-disabled {

  79.   display: none;

  80. }

  81. 

  82. /**

  83.  * Horizontal Buttons

  84.  */

  85. .jcarousel-skin-default .jcarousel-prev-horizontal {

  86.   position: absolute;

  87.   top: 55px;

  88.   left: 10px;

  89.   background-position: 0 0;

  90. }

  91. .jcarousel-skin-default .jcarousel-prev-horizontal:hover {

  92.   background-position: -32px 0;

  93. }

  94. .jcarousel-skin-default .jcarousel-prev-horizontal:active {

  95.   background-position: -64px 0;

  96. }

  97. 

  98. .jcarousel-skin-default .jcarousel-next-horizontal {

  99.   position: absolute;

  100.   top: 55px;

  101.   right: 10px;

  102.   background-position: 0 -32px;

  103. }

  104. .jcarousel-skin-default .jcarousel-next-horizontal:hover {

  105.   background-position: -32px -32px;

  106. }

  107. .jcarousel-skin-default .jcarousel-next-horizontal:active {

  108.   background-position: -64px -32px;

  109. }

  110. 

  111. /**

  112.  * Vertical Buttons

  113.  */

  114. .jcarousel-skin-default .jcarousel-prev-vertical {

  115.   position: absolute;

  116.   top: 10px;

  117.   left: 55px;

  118.   background-position: 0 -64px;

  119. }

  120. .jcarousel-skin-default .jcarousel-prev-vertical:hover {

  121.   background-position: -32px -64px;

  122. }

  123. .jcarousel-skin-default .jcarousel-prev-vertical:active {

  124.   background-position: -64px -64px;

  125. }

  126. 

  127. .jcarousel-skin-default .jcarousel-next-vertical {

  128.   position: absolute;

  129.   bottom: 10px;

  130.   left: 55px;

  131.   background-position: 0 -96px;

  132. }

  133. .jcarousel-skin-default .jcarousel-next-vertical:hover {

  134.   background-position: -32px -96px;

  135. }

  136. .jcarousel-skin-default .jcarousel-next-vertical:active {

  137.   background-position: -64px -96px;

  138. }

  139. 

  140. .jcarousel-skin-default .jcarousel-navigation {

  141.   margin: 0;

  142.   padding: 0;

  143. }

  144. 

  145. .jcarousel-skin-default .jcarousel-navigation li {

  146.   display: inline;

  147.   margin: 0 2px 0 0;

  148.   padding: 0;

  149.   background: none;

  150. }

  151. 

  152. .jcarousel-skin-default .jcarousel-navigation li.active a {

  153.   font-weight: bold;

  154.   text-decoration: none;

  155. }

  156.