|
|
| Line 1: |
Line 1: |
| <style> | | <!-- Carousel container --> |
| .carousel .carousel-inner .item omg {
| | <div id="my-pics" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;"> |
| 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"> | | <!-- Indicators --> |
| <ol class="carousel-indicators"> | | <ol class="carousel-indicators"> |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="0" class="active"></li>
| | <li data-target="#my-pics" data-slide-to="0" class="active"></li> |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="1"></li>
| | <li data-target="#my-pics" data-slide-to="1"></li> |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="2"></li>
| | <li data-target="#my-pics" data-slide-to="2"></li> |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="3"></li>
| | </ol> |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="4"></li>
| | |
| </ol>
| | <!-- Content --> |
| <div class="carousel-inner" role="listbox"> | | <div class="carousel-inner" role="listbox"> |
| <div class="item active"> | | |
| <img src="/smw/images/2/28/Himeji.jpg" /> | | <!-- Slide 1 --> |
| </div>
| | <div class="item active"> |
| | | <img src="/smw/images/2/28/Himeji.jpg" /> |
| <img src="/smw/images/c/c9/Akashi.jpg" /> | | </div> |
| </div>
| | |
| | | <!-- Slide 2 --> |
| | <div class="item"> |
| | <img src="/smw/images/c/c9/Akashi.jpg" /> |
| | </div> |
| | |
| | <!-- Slide 3 --> |
| | <div class="item"> |
| <img src="/smw/images/5/5d/Takeda.jpg" /> | | <img src="/smw/images/5/5d/Takeda.jpg" /> |
| </div>
| | </div> |
| | | |
| | <!-- Slide 3 --> |
| | <div class="item"> |
| <img src="/smw/images/1/1b/Bitchu23.jpg" /> | | <img src="/smw/images/1/1b/Bitchu23.jpg" /> |
| </div>
| | </div> |
| | | <!-- Slide 3 --> |
| | <div class="item"> |
| <img src="/smw/images/4/4e/Bitchu3.jpg" /> | | <img src="/smw/images/4/4e/Bitchu3.jpg" /> |
| </div>
| | </div> |
| </div><a class="left carousel-control" href="# custom-bootstrap- carousel" role="button" data-slide="prev"><span class=" glyphicon glyphicon- chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" | | |
| href="#custom-bootstrap-carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
| | |
| | </div> |
| | |
| | <!-- Previous/Next controls --> |
| | <a class="left carousel-control" href="#my-pics" role="button" data-slide="prev"> |
| | <span class="icon-prev" aria-hidden="true"></span> |
| | <span class="sr-only">Previous</span> |
| | </a> |
| | <a class="right carousel-control" href="#my-pics" role="button" data-slide="next"> |
| | <span class="icon-next" aria-hidden="true"></span> |
| | <span class="sr-only">Next</span> |
| | </a> |
| | |
| </div> | | </div> |
