slider
.slider__slide__item {
position: relative;
height: inherit;
overflow: hidden;
img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translateX(-50%) translateY(-50%) scale(1, 1);
will-change: opacity;
transition: transform 16s 0s linear;
}
&.slick-current, &.slick-before {
img {
transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
}
}
}
/**
* スライダー
*/
export default class extends ViewBase {
constructor(el) {
super(el);
}
initialize() {
super.initialize();
}
bind() {
// console.log(this);
// console.log(Object.keys(this));
this.$body.on('onInitBody', this.onLoadWindow.bind(this));
this.$el.on('init', this.onSlideInit.bind(this));
}
onLoadWindow() {
if($('.slick-initialized')[0]) {
return;
}
this.$el.slick({
autoplay: true,
pauseOnHover: false,
pauseOnDotsHover: false,
autoplaySpeed: 6000,
infinite: true,
fade: true,
speed: 6500,
cssEase: 'linear'
}).on('beforeChange', this.onBeforeChange.bind(this));
}
onBeforeChange(event, slick, currentSlide, nextSlide) {
$('.slick-slide').removeClass('slick-before');
$('.slick-active').addClass('slick-before');
}
onSlideInit() {
this.$body.addClass('is-slick-initialized');
}
}