Scroll to specific item on responsive carousel

[daniellelecomte]

Hey there! Thanks for such a great tool!

Is it possible to set which item displays first on a responsive carousel? I tried adding scroll with no luck...

(function($) {
    $(function() {
        var jcarousel = $('.jcarousel');
        var lIndex = 5;
        jcarousel
            .on('jcarousel:reload jcarousel:create', function () {
              var carousel = $(this),
                  width = carousel.innerWidth();

              if (width >= 900) {
                  width = width / 3;
              } else if (width >= 600) {
                  width = width / 2;
              } else if (width >= 250) {
                  width = width / 1;
              }

              carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');

              console.log("index: " + lIndex);
            })

            .jcarousel({
                scroll: lIndex
              });

        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });
    });
})(jQuery);

We are displaying sports scores and want to set the first item you see to be based upon the time of day by setting a var of 'lIndex' as noted in my code.

This is the staging site for reference: http://www.thesportsarena.net/staging/public_html/#skatesafescorescroller

Any help would be greatly appreciated. Thanks again!

[snake-345]

Hello. You can call scroll method without animation after jcarousel initialization.

jcarousel
  .on('jcarousel:reload jcarousel:create', function () {
    ...
  })
  .jcarousel() // initialization
  .jcarousel('scroll', lindex, false); // call scroll without animation for setting initalized slide

[jsor]

This is covered here: https://sorgalla.com/jcarousel/docs/cookbook/custom-start-position.html