API goTo() on a slider object returns undefined (site with lazyload and many sliders)

jibazee's Avatar

jibazee

07 Nov, 2018 12:32 PM

Hi there,

I want to control the actual slide via click on a < button >, but the slider object returns undefined when called via slider.goTo(slide);

$('.royalSlider').royalSlider({
    keyboardNavEnabled: true,
    controlNavigation: 'none',
    sliderTouch: true,
    fadeinLoadedSlide: true,
    transitionType: 'fade',
    imageScaleMode: 'fit',
    autoScaleSlider: true,
    autoScaleSliderWidth: 800,
    autoScaleSliderHeight: 494,
    imageScalePadding: 0,
    imageAlignCenter: false,
    numImagesToPreload: 0,
    usePreloader: false,
    arrowsNav: false,
    loop: true
  });

  // Original by Dimi Semenov: http://jsfiddle.net/DmitrySemenov/danpsx91

  // We have take care of all sliders
  var projectCount = $('.projectCount').html();

  // and for every project we dynamically load slides
  for (var i = 1; i <= projectCount; i++) {
    var actualRoyalslider = '.royalSlider-' + i;
    var slider = $(actualRoyalslider).data('royalSlider');
    var updateCurrentImage = function(slideContent) {
      if (slideContent.attr('data-image-appended')) {
        return;
      }
      var linkElement =
          slideContent.is('a') ? slideContent : slideContent.find('a').eq(0);
      var img = new Image();
      img.setAttribute('srcset', linkElement.attr('data-srcset'));
      img.src = linkElement.attr('href');
      img.setAttribute('alt', linkElement.text());
      linkElement.html(img);  // append image in anchor
      slideContent.attr('data-image-appended', 'true');
    };

    slider.ev.on('rsAfterContentSet', function(e, slideObject) {
      updateCurrentImage(slideObject.content);
    });

    $(actualRoyalslider + ' .rsSlide').each(function() {
      updateCurrentImage($(this).children().first());
    });

// I can access the buttons correctly, but slider.next() or slider.goTo(slide) return undefined
    for (var slide = 1; slide <= slider.numSlides; slide++) {
      $(actualRoyalslider + '-' + slide).click(function() {
        console.log(slider.next());
      });
    }
  }

Thanks, and any help greatly appreciated.

  1. Support Staff 1 Posted by Dmitry Semenov on 07 Nov, 2018 01:25 PM

    Dmitry Semenov's Avatar

    Hello,

    If you won't be able to resolve - please provide an isolated example (link to your page, or jsfiddle).

  2. 2 Posted by jibazee on 07 Nov, 2018 03:40 PM

    jibazee's Avatar

    I replaced var slider with let slider and now everything works as expected.

    Thank you!

  3. jibazee closed this discussion on 07 Nov, 2018 03:40 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac