JQuery прокрутка/карусельный

Question

Я ищу, чтобы создать карусель или прокручивать с помощью JQuery, до сих пор, я пытался реализовать jcarousel без толка, я надеюсь достичь следующего,

в основном я хотите показать список из 6 элементов, затем прокрутите список до следующих 6, затем перейдите к следующему 6 или назад к предыдущим 6, в списке не должно быть 6, но каждые 6 продуктов должны быть новые этапы для свиток.

Моя разметка выглядит так,

HTML

<ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
     <a class="arrows">Prev</a> 
     <a class="arrows next">Next</a> 

CSS

.products ul { width:258px; margin:0px auto; overflow:hidden; text-align:center; } 
.products ul li { width:95px; height:137px; float:left; margin-right:32px; margin-bottom:57px; border:1px solid red; text-align:left; } 
.jcarousel-prev, .jcarousel-next { position:absolute; top:0px; left:0px; width:83px; height:80px; background:url(/media/images/prev-horizontal.png) no-repeat top left; } 
.jcarousel-next { top:0px; left:329px; background:url(/media/images/horizontal-next.png) no-repeat top left;} 

Однако jCarousel только создает все Ли на той же строке, мне нужно 2 в строка и 3 строки, затем создайте новый раздел, который я могу прокрутить, как бы я это сделал?

Answer 1

Вы должны сделать каждый из li контейнером из шести элементов, который будет div. (я считаю, что jcarousel использует все li элементы, которые он находит в контейнере вы указываете ..)

так

Html

<div class="container"> 
    <div class="products"> 
     <ul> 
      <li> 
       <div>1</div> 
       <div>2</div> 
       <div>3</div> 
       <div>4</div> 
       <div>5</div> 
       <div>6</div> 
      </li> 
      <li> 
       <div>7</div> 
       <div>8</div> 
       <div>9</div> 
       <div>10</div> 
       <div>11</div> 
       <div>12</div> 
      </li> 
     </ul> 
    </div>  
    <a class="arrows jcarousel-prev" id="prev">Prev</a> 
    <a class="arrows next jcarousel-next" id="next">Next</a> 
</div> 

Css

.container{position:relative;width:424px} 
.products{width:258px;overflow:hidden;margin:0px auto;position:relative} 
.products ul { width:258px; margin:0px auto; text-align:center;} 
.products ul li{width:258px;overflow:hidden;} 
.products ul li div{ width:95px; height:137px; float:left; margin-right:32px; margin-bottom:57px; border:1px solid red; text-align:left; } 
.jcarousel-prev, .jcarousel-next { position:absolute; top:0px; left:0px; width:83px; height:80px; background:url(/media/images/prev-horizontal.png) no-repeat top left; } 
.jcarousel-next { top:0; right:0; left:auto;background:url(/media/images/horizontal-next.png) no-repeat top left;} 

JQuery

jQuery(".products").jcarousel({ 
    scroll: 1, 
    initCallback: mycarousel_initCallback, 
    buttonNextHTML: null, 
    buttonPrevHTML: null 

}); 

function mycarousel_initCallback(carousel) { 

    jQuery('.jcarousel-next').bind('click', function() { 
     carousel.next(); 
     return false; 
    }); 

    jQuery('.jcarousel-prev').bind('click', function() { 
     carousel.prev(); 
     return false; 
    }); 
} 

Демо на http://jsfiddle.net/gaby/NRKZK/

Answer 2

Я делаю то же самое с 3 рядами 5 колонок, вот как я это делаю так, чтобы они прилипают к этой конфигурации:

width_of_parentul = 5 * width_of_column

height_of_parentul = 3 * width_of_rows

не забудьте, конечно, подсчитать пробел и маржу, но в основном я всегда убеждаюсь, что не может быть больше места для любого объекта по ширине по высоте, а затем они просто устраиваются, чтобы выглядеть как карусель. Лично я не использую библиотеку, просто вычисляет ширину родительского элемента, а затем меняет свою левую позицию на ширину позиции, а на ее просто отображаются следующие элементы. Если вы хотите, я могу добавить пример кода, если вы не видите, что я имею в виду.