|
|
| Line 1: |
Line 1: |
| <style>
| | <div id="custom-bootstrap-carousel" class="carousel slide" data-ride="carousel" data-interval="7000"> |
| .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>
| |
| | |
| <div id="custom-bootstrap-carousel" class="carousel slide" data-ride="carousel" data-interval="7000" data-wrap="true" style="width:900px;margin:auto;"> | |
| <ol class="carousel-indicators"> | | <ol class="carousel-indicators"> |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="0" class="active"></li> | | <li data-target="#custom-bootstrap-carousel" data-slide-to="0" class="active"></li> |
