Widget:Carousel: Difference between revisions

From Jcastle.info
No edit summary
No edit summary
Line 1: Line 1:
<!-- Carousel container -->
<style>
<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:900px;height300px;margin:auto;">
.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>


<!-- Indicators -->
<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">
    <ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
        <li data-target="#custom-bootstrap-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
        <li data-target="#custom-bootstrap-carousel" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>
        <li data-target="#custom-bootstrap-carousel" data-slide-to="2"></li>
</ol>
        <li data-target="#custom-bootstrap-carousel" data-slide-to="3"></li>
 
        <li data-target="#custom-bootstrap-carousel" data-slide-to="4"></li>
<!-- Content -->
    </ol>
<div class="carousel-inner" role="listbox">
    <div class="carousel-inner" role="listbox">
 
        <div class="item active">
<!-- Slide 1 -->
<div class="item active">
             <img src="/smw/images/2/28/Himeji.jpg" />
             <img src="/smw/images/2/28/Himeji.jpg" />
</div>
        </div>
 
        <div class="item">
<!-- Slide 2 -->
<div class="item">
             <img src="/smw/images/c/c9/Akashi.jpg" />
             <img src="/smw/images/c/c9/Akashi.jpg" />
</div>
        </div>
 
        <div class="item">
<!-- Slide 3 -->
<div class="item">
<img src="/smw/images/5/5d/Takeda.jpg" />
<img src="/smw/images/5/5d/Takeda.jpg" />
</div>
        </div>
 
        <div class="item">
</div>
<img src="/smw/images/1/1b/Bitchu23.jpg" />
 
        </div>
<!-- Previous/Next controls -->
        <div class="item">
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<img src="/smw/images/4/4e/Bitchu3.jpg" />
<span class="icon-prev" aria-hidden="true"></span>
        </div>
<span class="sr-only">Previous</span>
    </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"
</a>
    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>
<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>

Revision as of 15:31, 7 January 2018

<style> .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>

Retrieved from "http://jcastle.info/smw139/index.php?title=Widget:Carousel&oldid=20654"
Monitored by WikiApiary
Powered by Semantic MediaWiki