使用普通CSS创建轮播

Question

I'm trying to create a carousel with plain CSS that can hold 5 items in the current view and display rest on click of sliders.

Reference : Bootstrap carousel

Here's my fruit list plunker that I've created with background grey.I tried by giving width to 50% but was not able to hide the items not display them on click of left/right arrow.Please help..

  <div class="col-xs-12 col-sm-12  col-md-12 col-lg-12" style="
    padding-left: 0px;bottom: 10px">
         <span class="glyphicon">&#xe079;</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">&#xe080;</span>
     </div>

Answer 1

So here is very basic simple example, don't have time now to provide more advanced code. 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");
});

Basically you just want div wrapper that hide overflow and those image or whatever div's with absolute position. Then you can trigger left position change with script and add some css transitions for animation.