3

I'm having an issue with the jquery plugin jcarousel which causes the carousel area to be moved when the browser is resized.

This happens when the carousel is set to "circular" and has already gone through each item. The container of the carousel has a style of left: -7300px; width: 10950px; When I resize the browser it changes to: left: -8030px; width: 8760px; and the carousel is out of view (seems to be to the left of where it should be, as I can still see items scrolling past).

EDIT: Adding code. I'm using Drupal + Views, so the html is a bit messy and can't really post. But here's how I'm setting up the carousel:

  $(document).ready(function() {
    $(".view-promo-box-home-page-carousel ul").jcarousel({
    visible: 1,
    scroll: 1,
    auto : 1,
    wrap : "circular",
    itemFallbackDimension : 730
    }); 
 });
Leon
  • 83
  • 2
  • 7
  • I'm designing a circular carousel right now, and I'm hitting the same issue. Upon browser resizing or messing with the CSS in any way in Firebug, the whole carousel
      tag jumps up by its height, like so: `height: 831px; top: -831px`. Either it's a bug or we're both doing something wrong.
     – Artem Russakovskii Nov 05 '10 at 23:03
  • I see you or some other Leon posted this bug over at jcarousel github: https://github.com/jsor/jcarousel/issues/#issue/64 and the author acknowledged it. Sounds like it's just a bug then. – Artem Russakovskii Nov 05 '10 at 23:14
  • Yeah that was my post, the author of the plugin came back to say he was aware of the bug. Which occurs on wrap: circular. I ended up using jcarousellite, which lacks slideshow implementation. But was quite easy to manually configure using JS setIntervals and trigger('click') to scroll each time. – Leon Nov 08 '10 at 12:26

2 Answers2

0

I know I'm late, but for persons like me, whom came to search for answer on this page, here's the answer from: http://www.sitepoint.com/forums/showthread.php?718555-Problem-with-Jcarousel

It looks like in your CSS the width of the list items for the carousel is being set to 178px and the actual images within them are 185px wide. Adjusting the width of the ".jcarousel-skin .jcarousel-item" to 185px (and adjusting any margins accordingly) should do the trick.

nikunj
  • 402
  • 5
  • 9
0

I tried a lot and found that, Jcarousel does not include the jquery.jcarousel.js by default. So try adding the following line to the jcarousel.module file in modules/jcarousel.

 drupal_get_path('module', 'jcarousel') . '/js/jquery.jcarousel.js',

After that instead of this on line 287 of jquery.jcarousel.js... if (i + 1 < self.first) {

replace it to this...

if (i + 1 < self.first % this.options.size) {

All the best...

It worked for me.

Rasesh
  • 1