You are here

Home » API reference » jCarousel 6.2

jcarousel-default.css in jCarousel 6.2

Same filename and directory in other branches
  1. 8.5 skins/default/jcarousel-default.css
  2. 8.3 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-horizontal {
  width: 440px;
  overflow: hidden;
}

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

.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-horizontal {

  30.   width: 440px;

  31.   overflow: hidden;

  32. }

  33. 

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

  35.   height: 440px;

  36.   overflow: hidden;

  37. }

  38. 

  39. .jcarousel-skin-default .jcarousel-item {

  40.   padding: 0;

  41.   width: 100px;

  42.   height: 100px;

  43.   overflow: hidden;

  44.   border: 1px solid #CCC;

  45.   list-style: none;

  46.   background: #fff none;

  47. }

  48. 

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

  50.   margin: 0 4px;

  51. }

  52. 

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

  54.   margin: 4px 0;

  55. }

  56. 

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

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

  59.   color: #000;

  60. }

  61. 

  62. /**

  63.  * Buttons

  64.  */

  65. .jcarousel-skin-default .jcarousel-next,

  66. .jcarousel-skin-default .jcarousel-prev {

  67.   display: block;

  68.   width: 32px;

  69.   height: 32px;

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

  71. }

  72. 

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

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

  75.   display: none;

  76. }

  77. 

  78. /**

  79.  * Horizontal Buttons

  80.  */

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

  82.   position: absolute;

  83.   top: 55px;

  84.   left: 10px;

  85.   background-position: 0 0;

  86. }

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

  88.   background-position: -32px 0;

  89. }

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

  91.   background-position: -64px 0;

  92. }

  93. 

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

  95.   position: absolute;

  96.   top: 55px;

  97.   right: 10px;

  98.   background-position: 0 -32px;

  99. }

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

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

  102. }

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

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

  105. }

  106. 

  107. /**

  108.  * Vertical Buttons

  109.  */

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

  111.   position: absolute;

  112.   top: 10px;

  113.   left: 55px;

  114.   background-position: 0 -64px;

  115. }

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

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

  118. }

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

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

  121. }

  122. 

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

  124.   position: absolute;

  125.   bottom: 10px;

  126.   left: 55px;

  127.   background-position: 0 -96px;

  128. }

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

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

  131. }

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

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

  134. }

  135. 

  136. .jcarousel-skin-default .jcarousel-navigation {

  137.   margin: 0;

  138.   padding: 0;

  139. }

  140. 

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

  142.   display: inline;

  143.   margin: 0 2px 0 0;

  144.   padding: 0;

  145.   background: none;

  146. }

  147. 

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

  149.   font-weight: bold;

  150.   text-decoration: none;

  151. }

  152.