When used custom arrows - thumbnails arrows is not shown in full screen mode.

Alexander Kazakov's Avatar

Alexander Kazakov

18 Mar, 2018 02:14 PM

Hi Dmitry,

Thank you for the wonderful plugin.

When used custom arrows - thumbnails arrows is not shown in full screen mode.
Site: Link
Screenshot: slider
Settings:

  var productSlider = $('#product-slider').royalSlider({
    fullscreen: {
      enabled: true,
    },
    controlNavigation: 'thumbnails',
    loop: false,
    arrowsNav: true,
    arrowsNavAutoHide: true,
    keyboardNavEnabled: true,
    fadeinLoadedSlide: true,
    globalCaption: true,
    globalCaptionInside: true,
    imageScaleMode: 'fill',
    transitionType: 'fade',
    transitionSpeed: 500,
    addActiveClass: true,
    thumbs: {
      arrowLeft: $('#product-slider-left-arrow'),
      arrowRight: $('#product-slider-right-arrow'),
      appendSpan: true,
      firstMargin: true,
      fitInViewport: false,
      spacing: 10,
    },
  }).data('royalSlider');


productSlider.ev.on('rsEnterFullscreen', function() { $('#product-slider').addClass('product-slider_fullscreen'); $('#product-slider').find('.rsNav').addClass('rsNav_fullscreen'); $('#product-slider').find('.rsOverflow').addClass('rsOverflow_fullscreen'); productSlider.st.imageScaleMode = 'fit-if-smaller'; productSlider.st.arrowsNavAutoHide = false; productSlider.updateSliderSize(true); }); productSlider.ev.on('rsExitFullscreen', function() { $('#product-slider').removeClass('product-slider_fullscreen'); $('#product-slider').find('.rsNav').removeClass('rsNav_fullscreen'); $('#product-slider').find('.rsOverflow').removeClass('rsOverflow_fullscreen'); productSlider.st.arrowsNavAutoHide = true; productSlider.st.imageScaleMode = 'fill'; productSlider.updateSliderSize(true); });
I customized the stylized buttons. Now in the pop-up window, the buttons on the carousel of the thumbnails are not shown. They start showing up if I clear the parameters: thumbs: {arrowLeft:, arrowRight:}
I would like these buttons to be displayed.

I'll write also in Russian.

Здравствуйте, Дмитрий.

Благодарю вас за этот прекрасный плагин.

Я настроил стилизованные кнопки. Теперь в всплывающем окне кнопки у карусели миниатюр не показываются. Они начинают показываться, если я убираю параметры: thumbs: { arrowLeft :, arrowRight:} Мне желательно чтобы эти кнопки показывались.

Напишите пожалуйста ответ и на русском языке, мне будет понятнее.
Заранее благодарю за помощь. Да поможет вам Бог.

  1. Support Staff 1 Posted by Dmitry Semenov on 18 Mar, 2018 08:38 PM

    Dmitry Semenov's Avatar

    Здравствуйте!

    Плагин не меняет и не передвигает кастомные кнопки, так что если вам требуется показать их в фулскрине - поместите их в элемент .royalSlider или .rsOverflow после инициализации или после rsEnterFulllscreen.

    var productSlider = $('#product-slider');
    $('#product-slider-left-arrow').appendTo(productSlider);
    $('#product-slider-right-arrow').appendTo(productSlider);
    

    Да и, в фулскрине корневой элемент слайдера получает класс rsFullscreen, не стоит добавлять rsNav_fullscreen или rsOverflow_fullscreen.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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