JCarousel direction issues WordPress
- SOLVED
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
See example: [[LINK href="http://www.warface.co.uk/clients/warface.co.uk/http://www.warface.co.uk/clients/warface.co.uk"]]http://www.warface.co.uk/clients/warface.co.uk/blog/[[/LINK]]
Please click the red central arrow to reveal the slider.
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;
}
<strong>PS: Im also using the same JCarousel on another page (http://www.warface.co.uk/clients/warface.co.uk/about/) and seems to be working fine, something tells me the problem maybe in the CSS?</strong>
Answers (2)
Andrzej answers:
I think it might be because you're loading jQuery twice. See the code:
http://nbm.im/20110116-94y-199kb.jpg
Rob Cleaton comments:
Sorry didnt fix it :(
Andrzej comments:
Sometime xhtml validation errors are causing this kind of strange behaviour.
Try replacing:
<button class="previous"><< Previous</button>
<button class="next">Next>></button>
with
<button class="previous"><< Previous</button>
<button class="next">Next >></button>
Andrzej comments:
Ok, I think I got it.
In your [[LINK href="http://www.warface.co.uk/clients/warface.co.uk/wp-content/themes/warface/js/functions.js"]]functions.js[[/LINK]] file, in jCarouselLite call, replace visible: 9 to visible: 3 (it should be the number of slides visible at one time I think).
So:
// Slidding Projects Pannel
$(".anyClass").jCarouselLite({
btnNext: "#panel .next",
btnPrev: "#panel .previous",
visible: 9,
speed:700,
});
to
// Slidding Projects Pannel
$(".anyClass").jCarouselLite({
btnNext: "#panel .next",
btnPrev: "#panel .previous",
visible: 3,
speed:700,
});
I have tested it [[LINK href="http://www.zglobica.pl/test2/"]]here[[/LINK]] and it works.
Rob Cleaton comments:
This may fix it temporary but unfortunately I will need to show more than 3 projects.
Andrzej comments:
Thing is your CSS/XHTML is now showing viewport for 3 projects. If you want 9, you need to edit rest of your code (mostly styling) so the front-end view would be representing the final effect you wanna achieve, and then come back to jCarousel settings and change visible items back to 9.
Andrzej comments:
By the way, if you want any help with changing of CSS/XHTML look of the slider, [[LINK href="http://wpquestions.com/user/profile/id/530"]]contact me[[/LINK]] and we'll try to arrange it.
Andrzej comments:
Hey, I think we have misunderstood each other at some point of this question. You said you eventually need to view more than 3 projects. This is not a problem, jCarousel's "visible" parameter, which I mentioned before is determing how much slides you wanna show at ONE time. You can have as much as you want total, but 3 would be visible at a time and you can browse all of them. Hopefully that clears that confusion a bit?
Rob Cleaton comments:
Hey Andrzej,
Thanks for looking into this, it turns out this issue is caused by setting the "visable" higher than the amount of list items, reason why it was working with 3 and not with 9 as we have 7 in the list.
Many thanks,
Rob
Utkarsh Kukreti answers:
Utkarsh Kukreti comments:
Could you replace the current carousel.js with the uncompressed one? I'm unable to reproduce the error if I save the page offline.
[[LINK href="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js"]]http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js[[/LINK]]