OK, losing my mind somewhat. I need some help with JCarousel on a site I am working on for a customer. For some reason, I have been stuck for hours now on the above issue. No matter what I try, I still have the issue (although the Carousel works OK on the page once loaded, go figure!)
I have tried this and this and this among other suggestions but no luck, the error still appears.
My code looks like this:
<div class="Block BlockContent">
<link rel="stylesheet" type="text/css" href="/content/PromoBannerCarousel/pbjcarousel.css">
<script type="text/javascript" src="/content/PromoBannerCarousel/jquery.jcarousel.min.js"></script>
<div class="jcarousel-skin-promobanner">
<div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
<div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
<ul id="promobannercarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; top: -500px; left: 0px; height: 90px; align: center;">
<li>
<a href="https://itoutlet.com.au/free-shipping-promotion-sep-2013/">
<img src="/content/PromoBannerCarousel/images/augfreedeliveryselprodmini.jpg" title="Free shipping on selected products throughout our store, available from Sep 11 to Sep 30 or while stocks last"/>
</a>
</li>
<li>
<a href="https://itoutlet.com.au/acer-promotions/">
<img src="/content/PromoBannerCarousel/images/acercashbackmini.jpg" title="Acer fantastic Laptop & All In One + Shipping cash back offers! Limited stocks, do not miss out!"/>
</a>
</li>
<li>
<a href="https://itoutlet.com.au/hp-promotions/">
<img src="/content/PromoBannerCarousel/images/hpaugoffersmini.jpg" title="HP fantastic Laptop + Shipping offers! Limited stocks, do not miss out!"/>
</a>
</li>
<li>
<a href="https://itoutlet.com.au/wd-promotions/">
<img src="/content/PromoBannerCarousel/images/wdpetrolpromotmini.jpg" title="WD Personal Cloud + Petrol Voucher + Shipping Promotion"/>
</a>
</li>
<li>
<a href="https://itoutlet.com.au/lenovo-promotions/">
<img src="/content/PromoBannerCarousel/images/lenovoaugoffersmini.jpg" title="Great ThinkPad + Shipping offers from Lenovo. Limited stocks, do not miss out!"/>
</a>
</li>
<li>
<a href="https://itoutlet.com.au/samsung-tablets/">
<img src="/content/PromoBannerCarousel/images/galaxyfreeshipmini.jpg" title="Thin, light, stylish, Samsung Galaxy + Shipping offers. Limited stocks, do not miss out!"/>
</a>
</li>
<li>
<a href="#">
<img src="/content/PromoBannerCarousel/images/5shippingmini.jpg" title="$5 shipping anywhere in Australia on selected accessories. Look out for the $5 Shipping tag!"/>
</a>
</li>
</ul>
</div>
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#promobannercarousel').jcarousel({
auto: 4,
scroll: 1,
wrap: 'circular',
animation: 500,
iniFallbackDimension: 90,
itemLoadCallback: {
onBeforeAnimation: mycarousel_fadeOut,
onAfterAnimation: mycarousel_fadeIn
}
});
function mycarousel_fadeOut(carousel) {
var JCcontainerID = carousel.clip.context.id;
$('#' + JCcontainerID).fadeOut();
}
function mycarousel_fadeIn(carousel) {
var JCcontainerID = carousel.clip.context.id;
$('#' + JCcontainerID).fadeIn();
}
});
</script>
and the CSS can be found here.
Here's a link to a page showing the issue. The Carousel is the Promotions Banner at the top of the page. I see the issue using Chrome (latest release).
Any help will be greatly appreciated!
PS:I do not see the error in FireFox (latest release) so not sure why it would be an error in Chrome but not FF...
PSS: You will also see when the page loads the first image flickers a few time before it settles. I have never had this happen with JCarousel and I have tried a few ways to solve this too... if you have any suggestions on this I would appreciate it very much also!!
Thanks in advance for any help! M
