target: '+=1' skips a slide on initial scroll (and other bugs)

[gl03]

almost got jcarousel working as i'd like to (100% screen width slideshow, centered slides of same heights/different widths, overflow slides visible), but only just...

• calling .jcarousel('scroll', '+=1') the first time after loading the page does not scroll to my .eq(1) item but to .eq(2). After this initial 'skipping' everything works as intended (only one slide steps). .jcarousel('items') returns the correct array of slides...
• 'center': true has the first slide's left edge positioned at exactly 50% of screenwidth on initial load. scrolling forth and back positions it correctly. as does resizing the browser window, except that the carousel jumps to .eq(1).
• 'center': true never centers the last item, which gets aligned with the right screen edge. calling .jcarousel('scroll', '+=1') when the last item is displayed only introduces a margin on the right edge.

using 0.3.0-beta.2, jquery v1.9.0, very basic configuration:

$(function() {
  $('#slideshow .viewport').jcarousel({
  });
  $('.next').jcarouselControl({
    target: '+=1'
  });
  $('.prev').jcarouselControl({
    target: '-=1'
  });
});

<div id="slideshow">
  <div class="viewport">
    <div class="wrapper">
      <div class="slide">
        <img alt="Test_slide3" src="/assets/test_slide3.jpg">
      </div>
      <div class="slide">
        <img alt="Test_slide2" src="/assets/test_slide2.jpg">
      </div>
      <div class="slide">
        <img alt="Test_slide1" src="/assets/test_slide1.jpg">
      </div>
      <div class="slide">
        <img alt="Test_slide2" src="/assets/test_slide2.jpg">
      </div>
    </div>
  </div>
  <div class="prev-next">
    <div class="prev">
      <a href="#">&lt;</a>
    </div>
    <div class="next">
      <a href="#">&gt;</a>
    </div>
  </div>
</div>

UPDATE: ok, i have moved this out of the rails context:

http://static.trust.at/jcarouseltest/

I have found out that these issues are webkit (Safari 6.0.2, Chrome 24) only:

• calling .jcarousel('scroll', '+=1') the first time scrolls to .eq(2) instead of .eq(2) (works in Firefox)
• 'center': true has the first slide's left edge positioned at 50% of screenwidth on initial load. window resize jumps to .eq(1) (both correct in Firefox)

the last issue (no centering on last item, +=1 on last item introduces right margin) is the same on Firefox however.

[jsor]

Yes, the first 2 issues are known (see #459 for example). Workarounds are: Set a width via CSS for each item or initialize/reload on $(window).load().

The last issues seems like a bug, will look into it.

[gl03]

Thanks, reload on $(window).load() at least doesn't look broken anymore in webkit, but the starting slide is now eq(1), whereas in Firefox it is eq(0). I've updated my online example, which now reflects this behaviour.

It seems to me that this is related to the initial skipping problem and the jump to eq(1) on resize. If I go

$('#slideshow .viewport').jcarousel('first')

or

$('#slideshow .viewport').jcarousel('target')

in webkit, i get $('.slide').eq(1) instead of the correct eq(0) as in Firefox.

Another thing I noticed: The behaviour of +=1 on the last item seems to be slightly different whether the width of the viewport is larger or smaller than the last slide. I intend to remove the prev/next buttons for first/last slides anyway, so I wouldn't really mind +=1 not working on the last, but having it centered correctly would be a blast...

[jsor]

For the first issue: jCarousel tries to be clever and detect the first item from the position of the list. In this case, all images have a width of 0 on first initialization and it detect the second item to start with. Calling reload keeps the current target. You can now either initialize the carousel completely on $(window).load() or do

$(window).load(function(){
    $('#slideshow .viewport')
        .jcarousel('reload')
        .jcarousel('scroll', 0, false);
});

The best way of cource would be to set a correct width for each item (either for the <li> or the <img>).

For the second issue: I'm still struggling with it. It's not that trivial as it seems (i know now again why i marked the center option experimental :smile:). Will keep you updated...

[Tim-Morris]

Hello, Thanks for your hard work on the plugin! I am having the jump issue as well in Chrome and Safari, but I am not using the center feature, it is a regular horizontal carousel...seen at hammerstone.com . I have tried to run the $(window).load() as you can see below…perhaps I have the code wrong. I can tell it loads the images first and then runs the carousel, but it is still jumping first starting a little bit higher and then moving down. I also have double-checked the width and height of each img and they are set correctly. It doesn't do this in Firefox, but only in Safari and Chrome.

Any thoughts?

$(window).load(function () {
                    $('.jcarousel') .jcarousel ({
                            'wrap': 'circular',
                            'animation': {
                            'duration': 4000,
                            'easing': 'linear',
                            }
                     })
                        .jcarouselAutoscroll ({
                        'interval': .01,
                     });
                });