JQuery Scroll / Карусель

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 просто создает все li на одной строке, мне нужно 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

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