Widget:Carousel: Difference between revisions

Latest revision as of 08:46, 14 January 2018

           <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />

           <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />

           <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />

 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
   
   Previous
 </a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
   
   Next
 </a>

@@ Line 1: / Line 1: @@
-<style>
+  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
-.carousel .carousel-inner .item omg {
+  <!-- Indicators -->
-width: 900px;
+  <ol class="carousel-indicators">
-height: 208px;
+     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-}
+     <li data-target="#myCarousel" data-slide-to="1"></li>
-.carousel .item {
+     <li data-target="#myCarousel" data-slide-to="2"></li>
-height: 208px;
+  </ol>
-width: 900px;
- }
+  <!-- Wrapper for slides -->
-.carousel .carousel-indicators li {
+  <div class="carousel-inner">
-    border-color: rgba(255, 255, 255, 1);
+     <div class="item active">
-    background: rgba(255, 255, 255, 0.0);
+            <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />
-}
+     </div>
-.carousel .carousel-indicators li:hover {
-    border-color: rgba(255, 255, 255, 1);
+     <div class="item">
-    background: rgba(255, 255, 255, 0.0);
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
-}
+     </div>
-.carousel .carousel-indicators li.active {
-    border-color: rgba(255, 255, 255, 1);
+     <div class="item">
-    background: rgba(255, 255, 255, 1);
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
-}
+     </div>
-.carousel .carousel-indicators {
+  </div>
-     width: inherit;
-    margin: 0;
+<!-- Left and right controls -->
-    left: initial;
+  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
-    right: 10px;
+     <span class="glyphicon glyphicon-chevron-left"></span>
-    bottom: initial;
+     <span class="sr-only">Previous</span>
-    top: 10px;
+  </a>
-    z-index: 100;
+  <a class="right carousel-control" href="#myCarousel" data-slide="next">
-}
+     <span class="glyphicon glyphicon-chevron-right"></span>
-.carousel .carousel-caption {
+     <span class="sr-only">Next</span>
-    color: rgba(255, 255, 255, 1);
+  </a>
-    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:300px;margin:auto;">
-    <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="1"></li>
-        <li data-target="#custom-bootstrap-carousel" data-slide-to="2"></li>
-        <li data-target="#custom-bootstrap-carousel" data-slide-to="3"></li>
-        <li data-target="#custom-bootstrap-carousel" data-slide-to="4"></li>
-    </ol>
-    <div class="carousel-inner" role="listbox">
-        <div class="item active">
-            <img src="/smw/images/2/28/Himeji.jpg" />
-        </div>
-        <div class="item">
-             <img src="/smw/images/c/c9/Akashi.jpg" />
-        </div>
-        <div class="item">
-<img src="/smw/images/5/5d/Takeda.jpg" />
-        </div>
-        <div class="item">
-<img src="/smw/images/1/1b/Bitchu23.jpg" />
-        </div>
-        <div class="item">
-<img src="/smw/images/4/4e/Bitchu3.jpg" />
-        </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>