You are here

Home » API reference » jCarousel 8.5

jcarousel-tango.css in jCarousel 8.5

Same filename and directory in other branches
  1. 8.3 skins/tango/jcarousel-tango.css
  2. 6.2 skins/tango/jcarousel-tango.css
  3. 7.3 skins/tango/jcarousel-tango.css
  4. 7.2 skins/tango/jcarousel-tango.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-tango {
  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-tango.jcarousel-vertical {
  height: 404px;
  width: 150px;
  margin: 50px auto;
}

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


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

/** Carousel **/

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

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

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

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

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

/** Carousel Controls **/

.jcarousel-skin-tango .jcarousel-control-prev,
.jcarousel-skin-tango .jcarousel-control-next {
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  text-align: center;
  background: #000;
  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;
  opacity: 0;
}
.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-prev,
.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
height: 30px;
width: 100%;
}

.jcarousel-skin-tango .jcarousel-control-prev:hover,
.jcarousel-skin-tango .jcarousel-control-next:hover {
  opacity: 0.5;
}

.jcarousel-skin-tango .jcarousel-control-prev {
  left: 0;
}
.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-prev {
  left: 0;
  top: 0;
}

.jcarousel-skin-tango .jcarousel-control-next {
  right: 0;
}

.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  right: 0;
  top: 373px;
}

.jcarousel-visible-1.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 70px;
}
.jcarousel-visible-2.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 171px;
}
.jcarousel-visible-3.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 272px;
}
.jcarousel-visible-4.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 373px;
}
.jcarousel-visible-5.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 474px;
}
.jcarousel-visible-6.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 575px;
}
.jcarousel-visible-7.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 676px;
}
.jcarousel-visible-8.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 787px;
}
.jcarousel-visible-9.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 898px;
}
.jcarousel-visible-10.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {
  top: 999px;
}

.jcarousel-skin-tango .jcarousel-control-prev:after {
  content: '\2039';
  line-height: 100px;
}
.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-prev:after {
  content: '\2039';
  line-height: 30px;
}


.jcarousel-skin-tango a.jcarousel-control-prev:focus,
.jcarousel-skin-tango a.jcarousel-control-prev:active,
.jcarousel-skin-tango a.jcarousel-control-prev:hover {
  text-decoration: none;
}
.jcarousel-skin-tango.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-tango .jcarousel-control-next:after {
  content: '\203A';
  line-height: 100px;
}
.jcarousel-skin-tango a.jcarousel-control-next:focus,
.jcarousel-skin-tango a.jcarousel-control-next:active,
.jcarousel-skin-tango a.jcarousel-control-next:hover {
  text-decoration: none;
}
.jcarousel-skin-tango.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;
  line-height: 30px;
}

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

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

File

skins/tango/jcarousel-tango.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-tango {

  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-tango.jcarousel-vertical {

  29.   height: 404px;

  30.   width: 150px;

  31.   margin: 50px auto;

  32. }

  33. 

  34. /* Sizes */

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

  36.   width: 150px;

  37. }

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

  39.   width: 301px;

  40. }

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

  42.   width: 452px;

  43. }

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

  45.   width: 603px;

  46. }

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

  48.   width: 754px;

  49. }

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

  51.   width: 905px;

  52. }

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

  54.   width: 1056px;

  55. }

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

  57.   width: 1207px;

  58. }

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

  60.   width: 1358px;

  61. }

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

  63.   width: 1509px;

  64. }

  65. 

  66. 

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

  68.   height: 100px;

  69.   width: 150px;

  70. }

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

  72.   height: 201px;

  73.   width: 150px;

  74. }

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

  76.   height: 302px;

  77.   width: 150px;

  78. }

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

  80.   height: 403px;

  81.   width: 150px;

  82. }

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

  84.   height: 504px;

  85.   width: 150px;

  86. }

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

  88.   height: 605px;

  89.   width: 150px;

  90. }

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

  92.   height: 706px;

  93.   width: 150px;

  94. }

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

  96.   height: 807px;

  97.   width: 150px;

  98. }

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

  100.   height: 908px;

  101.   width: 150px;

  102. }

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

  104.   height: 1009px;

  105.   width: 150px;

  106. }

  107. 

  108. /** Carousel **/

  109. 

  110. .jcarousel-skin-tango .jcarousel {

  111.   position: relative;

  112.   overflow: hidden;

  113.   height: inherit;

  114. }

  115. 

  116. .jcarousel-skin-tango .jcarousel ul {

  117.   width: 20000em;

  118.   position: relative;

  119.   list-style: none;

  120.   margin: 0;

  121.   padding: 0;

  122. }

  123. 

  124. .jcarousel-skin-tango .jcarousel li {

  125.   float: left;

  126.   width: 150px;

  127.   height: 100px;

  128.   margin-right: 1px;

  129. }

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

  131.   float: none;

  132.   margin-bottom: 1px;

  133. }

  134. 

  135. .jcarousel-skin-tango .jcarousel img {

  136.   display: block;

  137.   max-width: 100%;

  138.   height: auto !important;

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

  140. }

  141. 

  142. .jcarousel-skin-tango .jcarousel .loading {

  143.   text-align: center;

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

  145. }

  146. 

  147. /** Carousel Controls **/

  148. 

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

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

  151.   position: absolute;

  152.   top: 0;

  153.   width: 30px;

  154.   height: 100%;

  155.   text-align: center;

  156.   background: #000;

  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.   opacity: 0;

  168. }

  169. .jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-prev,

  170. .jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  171. height: 30px;

  172. width: 100%;

  173. }

  174. 

  175. .jcarousel-skin-tango .jcarousel-control-prev:hover,

  176. .jcarousel-skin-tango .jcarousel-control-next:hover {

  177.   opacity: 0.5;

  178. }

  179. 

  180. .jcarousel-skin-tango .jcarousel-control-prev {

  181.   left: 0;

  182. }

  183. .jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-prev {

  184.   left: 0;

  185.   top: 0;

  186. }

  187. 

  188. .jcarousel-skin-tango .jcarousel-control-next {

  189.   right: 0;

  190. }

  191. 

  192. .jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  193.   right: 0;

  194.   top: 373px;

  195. }

  196. 

  197. .jcarousel-visible-1.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  198.   top: 70px;

  199. }

  200. .jcarousel-visible-2.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  201.   top: 171px;

  202. }

  203. .jcarousel-visible-3.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  204.   top: 272px;

  205. }

  206. .jcarousel-visible-4.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  207.   top: 373px;

  208. }

  209. .jcarousel-visible-5.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  210.   top: 474px;

  211. }

  212. .jcarousel-visible-6.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  213.   top: 575px;

  214. }

  215. .jcarousel-visible-7.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  216.   top: 676px;

  217. }

  218. .jcarousel-visible-8.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  219.   top: 787px;

  220. }

  221. .jcarousel-visible-9.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  222.   top: 898px;

  223. }

  224. .jcarousel-visible-10.jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next {

  225.   top: 999px;

  226. }

  227. 

  228. .jcarousel-skin-tango .jcarousel-control-prev:after {

  229.   content: '\2039';

  230.   line-height: 100px;

  231. }

  232. .jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-prev:after {

  233.   content: '\2039';

  234.   line-height: 30px;

  235. }

  236. 

  237. 

  238. .jcarousel-skin-tango a.jcarousel-control-prev:focus,

  239. .jcarousel-skin-tango a.jcarousel-control-prev:active,

  240. .jcarousel-skin-tango a.jcarousel-control-prev:hover {

  241.   text-decoration: none;

  242. }

  243. .jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-prev:after {

  244.   /*CSS 3*/

  245.   transform: rotate(90deg);

  246.   /* Safari */

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

  248.   /* Firefox */

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

  250.   /* IE */

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

  252.   /* Opera */

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

  254.   /* Internet Explorer */

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

  256.   display: inline-block;

  257.   margin-top: 2px;

  258.   margin-left: 4px;

  259. }

  260. 

  261. .jcarousel-skin-tango .jcarousel-control-next:after {

  262.   content: '\203A';

  263.   line-height: 100px;

  264. }

  265. .jcarousel-skin-tango a.jcarousel-control-next:focus,

  266. .jcarousel-skin-tango a.jcarousel-control-next:active,

  267. .jcarousel-skin-tango a.jcarousel-control-next:hover {

  268.   text-decoration: none;

  269. }

  270. .jcarousel-skin-tango.jcarousel-vertical .jcarousel-control-next:after {

  271.   /*CSS 3*/

  272.   transform: rotate(90deg);

  273.   /* Safari */

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

  275.   /* Firefox */

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

  277.   /* IE */

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

  279.   /* Opera */

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

  281.   /* Internet Explorer */

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

  283.   display: inline-block;

  284.   margin-top: 2px;

  285.   margin-left: 4px;

  286.   line-height: 30px;

  287. }

  288. 

  289. .jcarousel-skin-tango .jcarousel-control-prev:hover span,

  290. .jcarousel-skin-tango .jcarousel-control-next:hover span {

  291.   display: block;

  292. }

  293. 

  294. .jcarousel-skin-tango .jcarousel-control-prev.inactive,

  295. .jcarousel-skin-tango .jcarousel-control-next.inactive {

  296.   opacity: .5;

  297.   cursor: default;

  298. }