https://www.shimz.co.jp/shared/js/lib/slickSettings.js

1var windowWidth = $(window).innerWidth();
2var centerPadding_W =windowWidth/2-600;
3
4var $slider = $(".slick"); // 2周目ががたつく対応
5
6$slider.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
7	$slider.find(".slick-slide").each(function (index, el) {
8		var $this = $(el),
9				slickindex = $this.attr("data-slick-index");
10
11		if (nextSlide == slick.slideCount - 1 && currentSlide == 0) {
12			// 現在のスライドが最初のスライドでそこから最後のスライドに戻る場合
13			if (slickindex == "-1") {
14				// 最後のスライドに対してクラスを付与
15				$this.addClass("is-active-next");
16			} else {
17				// それ以外は削除
18				$this.removeClass("is-active-next");
19			}
20		} else if (nextSlide == 0) {
21			// 次のスライドが最初のスライドの場合
22			if (slickindex == slick.slideCount) {
23				// 最初のスライドに対してクラスを付与
24				$this.addClass("is-active-next");
25			} else {
26				// それ以外は削除
27				$this.removeClass("is-active-next");
28			}
29		} else {
30			// それ以外は削除
31			$this.removeClass("is-active-next");
32		}
33	});
34});
35
36//メイン側
37$slider.slick({
38	autoplay: true,
39	autoplaySpeed: 3000,
40	slidesToShow: 1,
41	slidesToScroll: 1,
42	arrows: false,
43	fade: false,
44	asNavFor: '.slick02',
45	centerMode: true,
46	centerPadding: centerPadding_W+"px",
47	swipe: false,
48	responsive: [{
49		breakpoint: 1350,
50		settings: {
51			variableWidth: false,
52		},
53	},
54	{
55		breakpoint: 1200,
56		settings: {
57			centerPadding: '10%',
58		},
59	},
60	{
61		breakpoint: 768,
62		settings: {
63			centerMode: false,
64			swipe: true
65		}
66	}]
67});
68
69//サムネイル側
70$('.slick02').slick({
71	slidesToShow: 8,
72	slidesToScroll: 8,
73	asNavFor: '.slick',
74	dots: false,
75	focusOnSelect: true,
76	variableWidth: true,
77
78});
79
80
81//centerPadding調整
82$(function(){
83    var timer = false;
84    var prewidth = $(window).innerWidth();
85    var x = 1200;
86
87    $(window).resize(function() {
88        if (timer !== false) {
89            clearTimeout(timer);
90        }
91        timer = setTimeout(function() {
92            var nowWidth = $(window).innerWidth();
93            if(prewidth !== nowWidth){
94                location.reload();
95            }
96            prewidth = nowWidth;
97
98            if (windowWidth >= x) {
99                var centerPadding_W = windowWidth/2-600;
100            } else if (windowWidth <= 1024) {
101                var centerPadding_W = 0;
102            }
103            $('.slick').slick('slickSetOption','centerPadding',centerPadding_W+"px", true);
104            $('.slick .slick-slide.slick-current,.slick .slick-slide.is-active-next').prev('.slick-slide').addClass('flexEnd');
105        }, 100);
106    });
107});
108//
109//$(window).resize(function(){
110//    var timer = false;
111//	var windowWidth = $(window).width();
112//	var x = 1200;
113//
114//	if( timer !== false ) {
115//		clearTimeout(timer);
116//	}
117//	timer = setTimeout(function(){
118//
119//	},200);
120//});
121
122//next・prevボタン
123$('.next-method').on('click', function() {
124	$('.slick').slick('slickNext');
125});
126$('.prev-method').on('click', function() {
127	$('.slick').slick('slickPrev');
128});
129
130//左側の見切れslide調整用
131$(function(){
132	$('.slick-slide.slick-current,.slick-slide.is-active-next').prev('.slick-slide').addClass('flexEnd');
133	$('.slick-arrow,.slick02 .slick-slide').on('click', function() {
134		$('.slick-slide.slick-current,.slick-slide.is-active-next').prev('.slick-slide').addClass('flexEnd');
135		$('.slick-slide:not(.slick-current):not(.is-active-next)').prev('.slick-slide').removeClass('flexEnd');
136	});
137	
138	$(".slick").on('afterChange', function(event, slick, currentSlide){
139		$('.slick-slide.slick-current,.slick-slide.is-active-next').prev('.slick-slide').addClass('flexEnd');
140		$('.slick-slide:not(.slick-current):not(.is-active-next)').prev('.slick-slide').removeClass('flexEnd');
141	});
142});
143