Question

I am looking to create a carousel or scroll using jQuery, so far, I have tried to implement jcarousel to no avail, I looking to achieve the following,

basically I want to show a list of 6 items then scroll to the next 6, then scroll to the next 6 or back to the previous 6, there does not have to be 6 in the list, but every 6 products there should be a new stage to the scroll.

My markup looks like this,

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;}

However jCarousel just creates all the li’s on the same line, I need 2 per line and 3 rows, then create a new section which I can scroll too, how would I go about this?

Answer 1

You should make each li be the container of a group of six elements, which would be divs. (i believe that the jcarousel uses all the li elements it finds under the container you specify..)

so

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;
    });
}

Demo at http://jsfiddle.net/gaby/NRKZK/