Royal-Slider_put_arrows_inside.js

/* -------------------------------------------------------------------------
   begin Product Slider
 * ------------------------------------------------------------------------- */

var productSlider = $('#product-slider').royalSlider({
  fullscreen: {
    enabled: true,
  },
  imageScalePadding: 0,
  controlNavigation: 'thumbnails',
  loop: true,
  keyboardNavEnabled: true,
  fadeinLoadedSlide: true,
  imageScaleMode: 'fill',
  addActiveClass: true,
  autoPlay: {
    enabled: true,
    stopAtAction: false
  }
}).data('royalSlider');

productSlider.ev.on('rsEnterFullscreen', function() {
  productSlider.st.imageScaleMode = 'fit-if-smaller';
  productSlider.updateSliderSize(true);
  setTimeout(function() {
    $('#product-slider-custom-nav-prev').appendTo('#product-slider .rsOverflow').css('left', $('#product-slider .rsActiveSlide .rsImg').css('margin-left')).addClass('product-slider-custom-nav_active');
    $('#product-slider-custom-nav-next').appendTo('#product-slider .rsOverflow').css('left', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-left'), 10) + parseInt($('#product-slider .rsActiveSlide .rsImg').css('width'), 10) - 60 + 'px').addClass('product-slider-custom-nav_active');
    $('#product-slider-custom-close').appendTo('#product-slider .rsOverflow').css('left', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-left'), 10) + parseInt($('#product-slider .rsActiveSlide .rsImg').css('width'), 10) - 30 + 'px').css('top', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-top'), 10) - 36 + 'px').addClass('product-slider-custom-close_active');
  }, 275);
});

productSlider.ev.on('rsExitFullscreen', function() {
  productSlider.st.imageScaleMode = 'fill';
  productSlider.updateSliderSize(true);
  setTimeout(function() {
    productSlider.updateSliderSize(true);
  }, 200);
  $('#product-slider-left-arrow').appendTo('.product .product__slider-wrapper');
  $('#product-slider-right-arrow').appendTo('.product .product__slider-wrapper');
});

productSlider.ev.on('rsBeforeAnimStart', function(event) {
  $('#product-slider-custom-nav-next').removeClass('product-slider-custom-nav_active');
  $('#product-slider-custom-nav-prev').removeClass('product-slider-custom-nav_active');
  $('#product-slider-custom-close').removeClass('product-slider-custom-close_active');
});

productSlider.ev.on('rsAfterSlideChange', function(event) {
  if (document.querySelector('#product-slider').classList.contains('rsFullscreen')) {
    $('.product-slider-custom-nav-prev').css('left', $('#product-slider .rsActiveSlide .rsImg').css('margin-left')).addClass('product-slider-custom-nav_active');
    $('.product-slider-custom-nav-next').css('left', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-left'), 10) + parseInt($('#product-slider .rsActiveSlide .rsImg').css('width'), 10) - 60 + 'px').addClass('product-slider-custom-nav_active');
    $('#product-slider-custom-close').css('left', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-left'), 10) + parseInt($('#product-slider .rsActiveSlide .rsImg').css('width'), 10) - 30 + 'px').css('top', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-top'), 10) - 36 + 'px').addClass('product-slider-custom-close_active');
  }
});

$('#product-slider-custom-nav-prev').click(function(event) {
  productSlider.prev();
})
;
$('#product-slider-custom-nav-next').click(function(event) {
  productSlider.next();
});

$('#product-slider-custom-close').click(function(event) {
  $(this).removeClass('product-slider-custom-close_active');
  productSlider.exitFullscreen();
});

/* -------------------------------------------------------------------------
   end Product Slider
 * ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   begin Window Resize
 * ------------------------------------------------------------------------- */

(function() {
  window.addEventListener("resize", resizeThrottler, false);
  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    /* begin Product Slider */
    if (document.querySelector('#product-slider').classList.contains('rsFullscreen')) {
      $('#product-slider-custom-nav-next').removeClass('product-slider-custom-nav_active');
      $('#product-slider-custom-nav-prev').removeClass('product-slider-custom-nav_active');
      $('#product-slider-custom-close').removeClass('product-slider-custom-close_active');
      setTimeout(function(event) {
        $('.product-slider-custom-nav-prev').css('left', $('#product-slider .rsActiveSlide .rsImg').css('margin-left')).addClass('product-slider-custom-nav_active');
        $('.product-slider-custom-nav-next').css('left', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-left'), 10) + parseInt($('#product-slider .rsActiveSlide .rsImg').css('width'), 10) - 60 + 'px').addClass('product-slider-custom-nav_active');
        $('#product-slider-custom-close').css('left', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-left'), 10) + parseInt($('#product-slider .rsActiveSlide .rsImg').css('width'), 10) - 30 + 'px').css('top', parseInt($('#product-slider .rsActiveSlide .rsImg').css('margin-top'), 10) - 36 + 'px').addClass('product-slider-custom-close_active');
      }, 100)
    }
    /* end Product Slider */
  }
})();

/* -------------------------------------------------------------------------
   end Window Resize
 * ------------------------------------------------------------------------- */