blob: afcc15cae680107661501a82047b6f0aa0a38a96 [file]
/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
position: relative;
overflow: hidden;
}
.jcarousel-wrapper {
width: 400px;
}
/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
width: 99999px;
position: relative;
/* Optional, required in this case since it's a <ul> element */
list-style: none;
margin: 0;
padding: 0;
}
/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
/* Required only for block elements like <li>'s */
float: left;
width: 400px;
}
.jcarousel-pagination {
width: 100%;
list-style-type: none;
display: inline-block;
margin: 0;
padding: 20px 0 20px 0;
border-bottom: 1px solid $border-color;
li {
display: inline-block;
margin: 0 20px 0 0;
a {
border: 1px solid $border-color;
border-radius: 30px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
color: $carousel-link-color;
&:hover {
background-color: $carousel-hover-background-color;
border: 1px solid $carousel-hover-background-color;
text-decoration: none;
color: $carousel-hover-link-color;
}
}
&.active {
a {
background-color: $carousel-active-background-color;
border: 1px solid $carousel-active-background-color;
color: $carousel-active-link-color;
}
}
}
}
.jcarousel-controls {
display: inline-block;
width: 100%;
padding: 15px 0 15px 0;
border-top: 1px solid $border-color;
a {
display: inline-block;
background-color: $carousel-control-background-color;
color: $carousel-control-font-color;
border-radius: 3px;
padding: 5px 10px 5px 10px;
font-weight: 600;
&:hover {
text-decoration: none;
background-color: $carousel-control-hover-background-color;
}
}
.inactive {
display: none;
}
}
.jcarousel-control-prev {
}
.jcarousel-control-next {
float: right;
}