※社内専用

ECのスライドが一部ブラウザで出ない

  • HOME
  • EPRESS-EC
  • ECのスライドが一部ブラウザで出ない

ECのスライドが一部ブラウザで出ない

ECのスライドが一部ブラウザや環境(モバイルとか)で出ない場合。
画像の高さを正確に取得する前にスライダーが実行されている可能性が高いので
js/main.jsのSlider Proの部分を下記に差し替える
// slider
  if ($.isFunction($().sliderPro)) {
    (function() {
      var main_img = $('.main_visual .sp-slide img').get(0);
      if (!main_img) return;
      console.log(main_img.naturalWidth)
      if (!main_img.naturalHeight) {
        main_img.onload = function() {
          buildSliderPro(this)
        }
      } else {
        buildSliderPro(main_img)
      }

      function buildSliderPro(main_img) {
        console.log(main_img.naturalWidth)
        console.log(main_img.naturalHeight)
        var sliderDefaults = {
          main: {
            // autoplay: false,
            autoplayOnHover: 'none',
            width: main_img.naturalWidth,
            height: main_img.naturalHeight,
            slideDistance: 10,
            visibleSize: '100%',
            // arrows: true,
            fadeArrows: false,
            autoScaleLayers: false,
            touchSwipe: false,
            breakpoints: {},
            init: function(e) {
              var $li = $('.main_visual .main_visual_copy > li');
              $li.eq(0).addClass('active');
            },
            gotoSlide: function(e) {
              var prev = e.previousIndex;
              var next = e.index;
              var $li = $('.main_visual .main_visual_copy > li');
              $li.eq(prev).removeClass('active');
              $li.eq(next).addClass('active');
            },
            gotoSlideComplete: function(e) {
              var prev = e.previousIndex;
              var next = e.index;
              var $li = $('.main_visual .main_visual_copy > li');
              $li.eq(prev).removeClass('active');
              $li.eq(next).addClass('active');
            }
          },
          center: {
            // autoplay: false,
            autoplayOnHover: 'none',
            width: 1000,
            height: 450,
            slideDistance: 10,
            visibleSize: '100%',
            // arrows: true,
            fadeArrows: false,
            autoScaleLayers: false,
            breakpoints: {},
            init: function(e) {
              var $li = $('.main_visual .main_visual_copy > li');
              $li.eq(0).addClass('active');
            },
            gotoSlide: function(e) {
              var prev = e.previousIndex;
              var next = e.index;
              var $li = $('.main_visual .main_visual_copy > li');
              $li.eq(prev).removeClass('active');
              $li.eq(next).addClass('active');
            },
            gotoSlideComplete: function(e) {
              var prev = e.previousIndex;
              var next = e.index;
              var $li = $('.main_visual .main_visual_copy > li');
              $li.eq(prev).removeClass('active');
              $li.eq(next).addClass('active');
            }
          },
          wide: {
            width: '100%',
            autoHeight: true,
            slideDistance: 0,
            arrows: true,
            fadeArrows: false,
            fade: true,
            autoScaleLayers: false,
            touchSwipe: false,
            breakpoints: {}
          },
          contents: {
            width: 450,
            height: 300,
            aspectRatio: 1.5,
            slideDistance: 10,
            visibleSize: '100%',
            arrows: true,
            fadeArrows: false,
            buttons: false,
            fadeCaption: false,
            breakpoints: {}
          }
        };
        $('.slider-pro').each(function() {
          var opt = $(this).data();
          var number_of_slide = $(this).find('.sp-slide').length;
          $(this).addClass(opt.type || 'center');
          if (!this.hasAttribute('data-type')) {
            return true;
          }
          var options = $.extend(true, (sliderDefaults[opt.type] || sliderDefaults.center), {});
          if (opt.width) {
            options.width = opt.width
          }
          if (opt.height) {
            options.height = opt.height
          }
          if (typeof opt.distance !== 'undefined') {
            options.slideDistance = opt.distance
          }
          if (opt.type == 'contents') {
            if (opt.width || opt.height) {
              options.aspectRatio = Math.round(options.width / options.height * 100) / 100;
            }
            if (number_of_slide % 2 === 0) {
              options.visibleSize = options.width * (number_of_slide - 1) + options.slideDistance * (number_of_slide - 2);
            }
          }
          if (typeof opt.autoplay !== 'undefined') {
            options.autoplay = opt.autoplay
          }
          if (typeof opt.arrows !== 'undefined') {
            switch (opt.arrows) {
              case false:
                options.arrows = false;
                $(this).addClass('disable-arrows');
                break;
              case 'pc-only':
                var bp = 768 - scrollbarWidth - 1;
                options.breakpoints[bp] = options.breakpoints[bp] || {};
                options.breakpoints[bp].arrows = false;
                $(this).addClass('sp-disable-arrows');
                break;
            }
          }
          if (typeof opt.buttons !== 'undefined') {
            switch (opt.buttons) {
              case false:
                options.buttons = false;
                break;
              case 'pc-only':
                var bp = 768 - scrollbarWidth - 1;
                options.breakpoints[bp] = options.breakpoints[bp] || {};
                options.breakpoints[bp].buttons = false;
                break;
            }
          }
          $(this).sliderPro(options);
        });
      }
    })();
  }