0
我已将其即多个滑块行但事情是我需要偶数行从向右滑动至左侧(默认为)和奇怪的人从左至右其即时通讯无法到图。如何让猫头鹰传送带从左向右滑动?
我已将其即多个滑块行但事情是我需要偶数行从向右滑动至左侧(默认为)和奇怪的人从左至右其即时通讯无法到图。如何让猫头鹰传送带从左向右滑动?
引导旋转木马通过CSS只(从右到左,RTL)
HTML ----------------------------- ------
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS ------------------------------
/* Make the images wide and responsive. */
#myCarousel img {
height: auto;
max-width: 100%;
width: 100%;
}
/* Change the order of the indicators.
Return them to the center of the slide. */
.carousel-indicators {
width: auto;
margin-left: 0;
transform: translateX(-50%);
}
.carousel-indicators li {
float: right;
margin: 1px 4px;
}
.carousel-indicators .active {
margin: 0 3px;
}
/* Change the direction of the transition. */
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}