Question

Im using a jquery slider and having an issue with what direction it scrolls on click. It seems to screw up after clicking the right arrow then left, but will scroll left if clicked first, weird. Is this a bug or am I missing something here? PS- Im using Chrome (Mac) but seems to behave the same with Firefox and Safari

HTML

    <button class="previous"><< Previous</button>
    <button class="next">Next>></button>

    <div class="anyClass">
    <ul>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
    </ul></div><!-- anyClass END -->

    </div><!-- top pannel END -->

</div> <!--panel END -->

CSS

.project-thumb { /* -- This is the hit area -- */
    background: url("images/_scroll4.jpg") no-repeat 0 0;
    overflow: hidden; 
    width:499px;
    height:337px;
    display:block;
    top:0px;
    right:0px;
    position: absolute;
    }    
.project-thumb .boxcaption { /* -- This is the sliding area -- */
    background: #f7c923;
    position: absolute; 
    width:499px;
    opacity: .9; /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
.caption .boxcaption {
    height:100%;
    bottom:0px;
    left: 100%;
    }
.project-thumb .content {
    background: #f7c923;
    width:265px;
    display:block;
    margin:0 auto;
    top:26%;
    position: relative;
    }
.project-thumb h2 {
    font-family: Facebuster;
    text-transform: uppercase;
    color: #333;
    font-size: 60px;
    display:block;
    width:265px;
    line-height: 44px;
    text-align: center;
    }
.project-thumb a.view-project {
    background: url("images/button_viewproject.png") no-repeat 0px 9px;
    display:block;
    font-size: 12px;
    font-family: Gotham;
    text-transform: uppercase;
    color: #333;
    cursor: pointer;
    margin-left: 52px;
    padding-left: 36px; 
    }
.project-thumb a.view-project:hover {
    color: #f35555;
    }

Many thanks
Rob

Answer 1

The JS was out

JS

// Sliding Projects Panel
 $(".anyClass").jCarouselLite({
    btnNext: "#panel .next",
    btnPrev: "#panel .previous",
    visible: 9,
    speed:700,
});

Visible 9, when I only had 8 in the list.