[英]Creating carousel using plain CSS
我正在嘗試使用普通CSS創建一個輪播,該CSS可以在當前視圖中容納5個項目,並在單擊滑塊時顯示其余內容。
參考: 自舉旋轉木馬
這是我用背景灰色創建的水果列表插件 。我嘗試將寬度設置為50%,但無法隱藏這些項目,而單擊左/右箭頭則無法顯示它們。請幫助。
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="
padding-left: 0px;bottom: 10px">
<span class="glyphicon"></span>
<ul style="line-height:30px" id="nav" ng-repeat="item in fruitSlider">
<li>
<span class="fruit-name block" style="
text-align: left;">{{item.view}}</span>
<span class="mape-percent block">{{item.count}}%</span>
</li>
</ul>
<span class="glyphicon"></span>
</div>
因此,這是一個非常基本的簡單示例,現在沒有時間提供更高級的代碼。 https://jsfiddle.net/maximelian/1f0dwbL9/26/
HTML:
<div class="leftbutton"><</div>
<div class="outer">
<div class="div1 shown">Test</div>
<div class="div2 right">test 2</div>
</div>
<div class="rightbutton">></div>
CSS:
.leftbutton {
float:left;
}
.rightbutton {
float:left;
}
.outer {
float:left;
position:relative;
width:50px;
height:50px;
background-color: red;
overflow:hidden;
}
.shown {
position:absolute;
width:50px;
left:0px;
transition: left 1s;
-webkit-transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
background-color:green;
}
.left {
position:absolute;
left:-50px;
transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
-o-transition: left 1s;
overflow:hidden;
background-color:grey;
}
.right {
position:absolute;
left:50px;
transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
-o-transition: left 1s;
overflow:hidden;
background-color:grey;
}
JavaScript的:
$(".leftbutton").on("click",function(){
$(".shown").removeClass("shown").addClass("left");
$(".right").removeClass("right").addClass("shown");
});
$(".rightbutton").on("click",function(){
$(".shown").removeClass("shown").addClass("right");
$(".left").removeClass("left").addClass("shown");
});
基本上,您只希望div包裝器隱藏溢出和那些圖像或具有絕對位置的任何div。 然后,您可以使用腳本觸發左位置更改,並為動畫添加一些CSS過渡。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.