You are here

Home » API reference » jCarousel 7.3

jcarousel-default.css in jCarousel 7.3

Same filename and directory in other branches
  1. 8.5 skins/default/jcarousel-default.css
  2. 8.3 skins/default/jcarousel-default.css
  3. 6.2 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.
 */

/**
 * Carousel
 */
.jcarousel-skin-default.jcarousel-wrapper {
  border: 10px solid #fff;
  -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;
}

/**
 * Controls
 */

.jcarousel-skin-default .jcarousel-next,
.jcarousel-skin-default .jcarousel-prev {
  visibility: hidden;
}

.jcarousel-skin-default .jcarousel-next:after {
  content: '›';
  left: 15px;
}
.jcarousel-skin-default .jcarousel-prev:after {
  content: '‹';
  right: 15px;
}

.jcarousel-skin-default .jcarousel-next:after,
.jcarousel-skin-default .jcarousel-prev:after {
  visibility: visible;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  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 4px #F0EFE7;
  -moz-box-shadow: 0 0 4px #F0EFE7;
  box-shadow: 0 0 4px #F0EFE7;
}

File

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

  2.  * A simple sample carousel skin.

  3.  *

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

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

  6.  *

  7.  * CSS and icons by Nathan Haug.

  8.  */

  9. 

  10. /**

  11.  * Carousel

  12.  */

  13. .jcarousel-skin-default.jcarousel-wrapper {

  14.   border: 10px solid #fff;

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

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

  17.   border-radius: 5px;

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

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

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

  21. }

  22. 

  23. /**

  24.  * Controls

  25.  */

  26. 

  27. .jcarousel-skin-default .jcarousel-next,

  28. .jcarousel-skin-default .jcarousel-prev {

  29.   visibility: hidden;

  30. }

  31. 

  32. .jcarousel-skin-default .jcarousel-next:after {

  33.   content: '›';

  34.   left: 15px;

  35. }

  36. .jcarousel-skin-default .jcarousel-prev:after {

  37.   content: '‹';

  38.   right: 15px;

  39. }

  40. 

  41. .jcarousel-skin-default .jcarousel-next:after,

  42. .jcarousel-skin-default .jcarousel-prev:after {

  43.   visibility: visible;

  44.   position: absolute;

  45.   top: 50%;

  46.   margin-top: -15px;

  47.   width: 30px;

  48.   height: 30px;

  49.   text-align: center;

  50.   text-decoration: none;

  51.   background: #4E443C;

  52.   color: #fff;

  53.   text-decoration: none;

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

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

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

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

  58.   border-radius: 30px;

  59.   -webkit-box-shadow: 0 0 4px #F0EFE7;

  60.   -moz-box-shadow: 0 0 4px #F0EFE7;

  61.   box-shadow: 0 0 4px #F0EFE7;

  62. }