Как сделать ползунок div?

Question

Я пытаюсь сделать слайдер, который прокручивает более 3 элементов div на 3 новых элемента прокрутки. Я ищу ручной слайдер со стрелкой, указывающей справа на правой стороне и слева на левой стороне. Ползунок должен скользить вправо при нажатии правой стрелки и отображать 3 оставшихся элемента div. Если сначала нажать левую стрелку, ничего не должно произойти. если щелкнуть по щелчку правой стрелки, он должен вернуться к трем предыдущим элементам div. Если стрелка вправо дважды щелкнет по строке, второй щелчок должен вернуться к исходным 3 элементам div. В принципе, я хочу получить что-то вроде слайдера на веб-сайте единства. Ссылка: http://unity3d.com/unity

Вот мой код HTML до сих пор. Он отображает коробки на 3 колонки и 2 ряда:

<div class="categories"> 
    <div class="category"> 
     <div class="rect"> 
      <img src="stuff.gif"> 
     </div> 
     <h3>Stuff</h3> 
     <p>Stuff.</p> 
    </div> 
    <div class="category"> 
     <div class="rect"> 
      <img src="stuff.gif"> 
     </div> 
     <h3>Stuff</h3> 
     <p>Stuff.</p> 
    </div> 
    <div class="category"> 
     <div class="rect"> 
      <img src="stuff.gif"> 
     </div> 
     <h3>Stuff</h3> 
     <p>Stuff.</p> 
    </div> 
    <div class="category"> 
     <div class="rect"> 
      <img src="stuff.gif"> 
     </div> 
     <h3>Stuff</h3> 
     <p>Stuff.</p> 
    </div> 
    <div class="category"> 
     <div class="rect"> 
      <img src="stuff.gif"> 
     </div> 
     <h3>Stuff</h3> 
     <p>Stuff.</p> 
    </div> 
    <div class="category"> 
     <div class="rect"> 
      <img src="stuff.gif"> 
     </div> 
     <h3>Stuff</h3> 
     <p>Stuff.</p> 
    </div> 
</div> 

Вот стили CSS для коробок:

/********************** 
*******CATEGORIES****** 
**********************/ 
.categories { 
    width: 90%; 
    margin: 3% 9%; 
    clear: left; 
} 

.category { 
    padding: 7% 5% 3% 5%; 
    width: 20%; 
    border: 1px solid #E0E0E0; 
    float: left; 
    cursor: pointer; 
    text-align: center; 
} 

.category:hover { 
    border: 1px solid #4F8E64; 
} 

.category h3 { 
    color: #3F7250; 
    margin: 6% 0; 
} 

.category p { 
    text-align: center; 
} 

Убедитесь, что прокладка и запас ширины и остается в процентах. Не стесняйтесь изменять код и делиться им со мной на скрипке или чем-то еще.

Answer 1

Вы можете использовать плагин jQuery для Caroufredsel. Вот страница установки:

http://dev7studios.com/caroufredsel-old/installation.php 

А вот пример рядом с вашим:

http://coolcarousels.frebsite.nl/c/58/ 

При прокрутке вниз в пример и нажмите [..] в оранжевом поле - вы увидите, код для примера.

Это код для карусели:

$('#carousel').carouFredSel({ 
     width: '90%', 
     items: 3, 
     scroll: 3, 
     auto: false, 
     prev: '#prev', 
     next: '#next', 
     infinite: false 
    }); 

Вы также можете использовать circular: false, если вы хотите, чтобы слайды не быть круглыми.

Answer 2

Итак, следующие комментарии, если вы считаете начальной загрузки, включают бутстраповских JS и CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

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"> 
     <section> 
      Some Info 
     </section> 
     <section> 
      Some Info 2 
     </section> 
     <section> 
      Some Info 3 
     </section> 
    </div> 
    <div class="item"> 
     <section> 
      Some Info 
     </section> 
     <section> 
      Some Info 2 
     </section> 
     <section> 
      Some Info 3 
     </section> 
    </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

section{ 
    display:inline-block; 
    border:1px solid black; 
} 
.item{ 
    text-align:center 
} 

Вы можете управлять разделами и содержание как Вы, пожалуйста.

Answer 3

вы можете сделать это, используя jQuery, нужно сидеть некоторое время и делать слайдер custome, и он будет работать согласно вашей логике. Надеюсь, это вам поможет.