Multiple Sliders With Different Options

a's Avatar

a

29 Sep, 2016 11:27 PM

Hello,

I'm banging my head a bit as to how go about applying different options to sliders on a page.

This is my code, which is working great aside from applying different options based on the html data markers you can see in the code... I can't get it to work with .each() or by injecting options directly from the page footer tied to the #id of sliders (as you can see, I'm not great with jQuery, but perhaps you can sort me out);

function setslideshow() {

        // Reset slide ID
        slide_id = 0;

        clicksupport = false;
        dragsupport = false;

    slideshow_w = null;
    slideshow_h = null;

        // Default Slideshow
        default_slideshow = $('.royalSlider.default-slideshow');

        if (default_slideshow.length) {

            if (default_slideshow.hasAttr('data-slideshow-transition')) {
                if (default_slideshow.attr('data-slideshow-transition') == 'move') {
                    data_slideshow_transition = 'move';
                } else {
                    data_slideshow_transition = 'fade';
                }
            } else {
                data_slideshow_transition = 'fade';
            }

            if (default_slideshow.hasAttr('data-slideshow-autoplay')) {
                if (default_slideshow.attr('data-slideshow-autoplay') == '1') {
                    data_slideshow_autoplay = true;
                } else {
                    data_slideshow_autoplay = false;
                }
            } else {
                data_slideshow_autoplay = false;
            }

      if (default_slideshow.attr('data-slideshow-type') == 'visibleNearby') {
        visible_nearby = true;
        data_slideshow_transition_type = 'move';
        scale_mode = 'fit';
        showNav = false;
        if (default_slideshow.hasAttr('data-slideshow-indicator')) {
                if (default_slideshow.attr('data-slideshow-indicator') == 'bullets') {
                    navType = 'bullets';
                } else if (default_slideshow.attr('data-slideshow-indicator') == 'numerical') {
                    navType = 'none';
                }
            } else {
                navType = 'none';
            }
      } else {
        visible_nearby = false;
        scale_mode = 'fill';
        if (default_slideshow.hasAttr('data-slideshow-arrows')) {
          if (default_slideshow.attr('data-slideshow-arrows') == '1') {
            showNav = true;
          } else {
            showNav = false;
          }
        }
        if (default_slideshow.hasAttr('data-slideshow-indicator')) {
                if (default_slideshow.attr('data-slideshow-indicator') == 'bullets') {
                    navType = 'bullets';
                } else if (default_slideshow.attr('data-slideshow-indicator') == 'numerical') {
                    navType = 'none';
                }
            } else {
                navType = 'none';
            }
      }

            default_slideshow.royalSlider({

                fullscreen: {
                    enabled: false,
                    nativeFS: true
                },
                autoPlay: {
            enabled: data_slideshow_autoplay,
            pauseOnHover: false,
            stopAtAction: false,
            delay: 4000
        },
        addActiveClass: true,
                controlNavigation: navType,
                autoScaleSlider: false,
                autoScaleSliderWidth: slideshow_w,
                autoScaleSliderHeight: slideshow_h,
                loop: false,
                loopRewind: true,
                imageScaleMode: scale_mode,
                navigateByClick: true,
                sliderDrag: true,
                numImagesToPreload: 6,
                slidesSpacing: 0,
                imageScalePadding: 0,
                arrowsNav: showNav,
                arrowsNavAutoHide: true,
                arrowsNavHideOnTouch: true,
                keyboardNavEnabled: false,
                fadeinLoadedSlide: true,
                globalCaption: false,
                globalCaptionInside: false,
                transitionType: data_slideshow_transition,
                slideTransitionEasing:"easeInOutQuart",
                transitionSpeed: slideshow_speed,
                    visibleNearby: {
                            enabled: visible_nearby,
                            centerArea: 0.75,
                            center: true,
                            breakpoint: 650,
                            breakpointCenterArea: 0.8,
                            navigateByCenterClick: true
                    },
                thumbs: {
                    appendSpan: false,
                    firstMargin: true,
                    paddingBottom: 4
                }
            });

            slider = default_slideshow.data('royalSlider');
            slider.ev.on('rsAfterSlideChange', function(event) {
                // triggers after slide change
                slide_id = slider.currSlideId;
            });

      default_slideshow.find('.rsArrowLeft .rsArrowIcn').html('<svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><use x="0" y="0" xlink:href="#arrowLeft" /></svg>');
      default_slideshow.find('.rsArrowRight .rsArrowIcn').html('<svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">          <use x="0" y="0" xlink:href="#arrowRight" /></svg>');

        }

    resize();

}

Thanks so much,
Anders

  1. Support Staff 1 Posted by Dmitry Semenov on 30 Sep, 2016 05:16 PM

    Dmitry Semenov's Avatar

    Hello,

    Here is a basic example with each:

    $('.royalSlider').each(function() {
        var sliderEl = $(this);
        var sliderOptions = {
            autoScaleSlider:false,
            // ...
        };
        if(slideEl.data('some-option-value')) {
            sliderOptions.someOption = slideEl.data('some-option-value');
        }
    
        sliderEl.royalSlider(sliderOptions);
    
        // sliderEl.ev.on( ...
    });
    
  2. 2 Posted by a on 30 Sep, 2016 11:23 PM

    a's Avatar

    Fantastic! Thank you so much!

  3. a closed this discussion on 30 Oct, 2016 08:24 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