Widget:Carousel: Difference between revisions

Revision as of 23:52, 24 July 2017

   width: 100%;

} .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: 60px;
   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: 80px;
       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>

<a class="left carousel-control" href="#custom-bootstrap-carousel" role="button" data-slide="prev"></a><a class="right carousel-control"

   href="#custom-bootstrap-carousel" role="button" data-slide="next">Next</a>

@@ Line 151: / Line 151: @@
      <div class="carousel-inner" role="listbox">
          <div class="item active">
-             <img src="http://bootstrapdesigntools.com/assets/images/1024x400/1.jpg" alt="Lisbon">
+             <img src="/smw/images/2/28/Himeji.jpg" width="900" height="202" />
-             <div class="carousel-caption">The is a new first slide</div>
+             <div class="carousel-caption">Himeji Castle</div>
          </div>
          <div class="item">
-            <img src="http://bootstrapdesigntools.com/assets/images/1024x400/2.jpg">
+             <img src="/smw/images/c/c9/Akashi.jpg" width="900" height="208" />
-             <div class="carousel-caption">The is the second slide</div>
+             <div class="carousel-caption">Akashi Castle</div>
          </div>
          <div class="item">
-            <img src="http://bootstrapdesigntools.com/assets/images/1024x400/3.jpg">
+<img src="/smw/images/b/b5/Matsue.jpg" width="900" height="208" />
          </div>
          <div class="item">
              <a href="http://google.com" target="_blank" class="carousel-link">
-                <img src="/assets/images/1024x400/4.jpg">
+<img src="/smw/images/1/1b/Bitchu23.jpg" width="900" />
                  <div class="carousel-caption">Fourth slide</div>
              </a>
@@ Line 169: / Line 169: @@
          <div class="item">
              <a href="http://google.com" class="carousel-link">
-                <img src="http://bootstrapdesigntools.com/assets/images/1024x400/5.jpg">
+<img src="/smw/images/4/4e/Bitchu3.jpg" width="900" />
              </a>
          </div>