152 lines
2.3 KiB
CSS
152 lines
2.3 KiB
CSS
/*
|
|
Carousel
|
|
========================================
|
|
*/
|
|
|
|
.carousel {
|
|
position: relative;
|
|
margin-bottom: var(--base-line-height);
|
|
line-height: 1;
|
|
}
|
|
|
|
.carousel-inner {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.carousel-inner>.item {
|
|
display: none;
|
|
position: relative;
|
|
transition: 0.6s ease-in-out left;
|
|
}
|
|
|
|
/* Account for jankitude on images */
|
|
.carousel-inner>.item>img,
|
|
.carousel-inner>.item>a>img {
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
|
|
.carousel-inner>.active,
|
|
.carousel-inner>.next,
|
|
.carousel-inner>.prev {
|
|
display: block;
|
|
}
|
|
|
|
.carousel-inner>.active {
|
|
left: 0;
|
|
}
|
|
|
|
.carousel-inner>.next,
|
|
.carousel-inner>.prev {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.carousel-inner>.next {
|
|
left: 100%;
|
|
}
|
|
|
|
.carousel-inner>.prev {
|
|
left: -100%;
|
|
}
|
|
|
|
.carousel-inner>.next.left,
|
|
.carousel-inner>.prev.right {
|
|
left: 0;
|
|
}
|
|
|
|
.carousel-inner>.active.left {
|
|
left: -100%;
|
|
}
|
|
|
|
.carousel-inner>.active.right {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Left/right controls for nav */
|
|
.carousel-control {
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 15px;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-top: -20px;
|
|
font-size: 60px;
|
|
font-weight: 100;
|
|
line-height: 30px;
|
|
color: var(--white);
|
|
text-align: center;
|
|
background: var(--gray-darker);
|
|
border: 3px solid var(--white);
|
|
border-radius: 23px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Reposition the right one */
|
|
.carousel-control.right {
|
|
left: auto;
|
|
right: 15px;
|
|
}
|
|
|
|
/* Hover/focus state */
|
|
.carousel-control:hover,
|
|
.carousel-control:focus {
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Carousel indicator pips */
|
|
.carousel-indicators {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
z-index: 5;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.carousel-indicators li {
|
|
display: block;
|
|
float: left;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 5px;
|
|
text-indent: -999px;
|
|
background-color: #ccc;
|
|
background-color: rgba(255, 255, 255, .25);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.carousel-indicators .active {
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* Caption for text below images */
|
|
.carousel-caption {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 15px;
|
|
background: var(--gray-dark);
|
|
background: rgba(0, 0, 0, .75);
|
|
}
|
|
|
|
.carousel-caption h4,
|
|
.carousel-caption p {
|
|
color: var(--white);
|
|
line-height: var(--base-line-height);
|
|
}
|
|
|
|
.carousel-caption h4 {
|
|
margin: 0 0 5px;
|
|
}
|
|
|
|
.carousel-caption p {
|
|
margin-bottom: 0;
|
|
}
|