| /* |
| 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; |
| } |