jcarousel-tango.css in jCarousel 8.4
/**
* 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
assets/vendor/jcarousel/skins/tango/jcarousel-tango.css
View source
-
- /**
- * 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;
- }