投稿日:2019/10/21
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);
});
}
})();
}