Widget:Carousel: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<style> | <style> | ||
#custom-bootstrap-carousel{ | |||
width: 900px; | |||
height: 208px; | |||
} | |||
.carousel .carousel-inner .item omg { | .carousel .carousel-inner .item omg { | ||
width: 900px; | width: 900px; | ||
Revision as of 21:02, 25 July 2017
<style>
- custom-bootstrap-carousel{
width: 900px; height: 208px; } .carousel .carousel-inner .item omg { width: 900px; height: 208px; } .carousel .item { height: 208px; width: 900px;
}
.carousel .carousel-indicators li {
border-color: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 0.0);
} .carousel .carousel-indicators li:hover {
border-color: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 0.0);
} .carousel .carousel-indicators li.active {
border-color: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
} .carousel .carousel-indicators {
width: inherit; margin: 0; left: initial; right: 10px; bottom: initial; top: 10px; z-index: 100;
} .carousel .carousel-caption {
color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400; text-align: center; display: block; z-index: 0;
} .carousel-control {
opacity: 1; color: rgba(255, 255, 255, 0.6);
} .carousel-control:hover, .carousel-control:focus, .carousel-control:active {
opacity: 1; color: rgba(255, 255, 255, 0.95);
} .carousel-control.left {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.0001) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.0001) 100%);
} .carousel-control.right {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.25) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.25) 100%);
} .carousel-control.left:hover, .carousel-control.left:focus, .carousel-control.left:active {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.0001) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.0001) 100%);
} .carousel-control.right:hover, .carousel-control.right:focus, .carousel-control.right:active {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.4) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.4) 100%);
} .carousel .carousel-control span {
position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px;
} .carousel .carousel-control.left span {
margin-left: -10px; left: 50%;
} .carousel .carousel-control.right span {
margin-right: -10px; right: 50%;
} @media (min-width: 768px) {
.carousel-control span {
width: 30px;
height: 30px;
margin-top: -10px;
font-size: 30px;
}
} .carousel .carousel-control {
top: 50%; width: 30px; height: 200px; margin-top: -30px;
} .carousel .carousel-control.left {
border-radius: 0 5px 5px 0;
} .carousel .carousel-control.right {
border-radius: 5px 0 0 5px;
} .carousel .carousel-control span {
margin-top: -10px;
} .carousel .carousel-control.left span {
margin-left: -10px;
} .carousel .carousel-control.right span {
margin-right: -10px;
} @media (min-width: 768px) {
.carousel .carousel-control {
width: 40px;
height: 200px;
margin-top: -40px;
}
.carousel .carousel-control span {
margin-top: -14px;
}
.carousel .carousel-control.left span {
margin-left: -14px;
}
.carousel .carousel-control.right span {
margin-right: -14px;
}
} .carousel .carousel-control {
top: initial; height: 30px; border-radius: 0 0 0 0;
} .carousel .carousel-control.left {
border-radius: 0 5px 0 0;
} .carousel .carousel-control.right {
border-radius: 5px 0 0 0;
} @media (min-width: 768px) {
.carousel .carousel-control {
height: 40px;
}
} </style>
