Создание карусели с использованием простого CSS

Question

Я пытаюсь создать карусель с простым 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">&#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

Итак, вот очень простой простой пример, сейчас у меня нет времени, чтобы предоставить более продвинутый код. 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-переходы для анимации.