https://www.maeda-cl.com/wp-content/themes/new_wp-pop/assets/js/mod_slide.js

1$(function(){
2
3
4
5// slide A -----------------------------------------------------------------------------------
6var slide_A;
7var slide_A_catch;
8$("#MV_A").append('<ul class="mvDots"></ul>');
9$(".mvWrap","#MV_A").append('<div class="arr arrL"></div><div class="arr arrR"></div>');
10$(".image","#MV_A").each(function(){
11	$(".mvDots","#MV_A").append('<li></li>');
12});
13
14slide_A = $(".stage","#MV_A").slick({
15	dots: false,
16	arrows: false,
17	autoplay: true,
18	autoplaySpeed: 4000,
19	centerMode: true,
20	pauseOnHover: false,
21	speed: 800,
22	variableWidth: true
23});
24
25slide_A_catch = $(".catch","#MV_A").slick({
26	dots: false,
27	arrows: false,
28	autoplay: false,
29	draggable: false,
30	pauseOnHover: false,
31	fade: true,
32	swipe: false
33});
34
35$(".mvDots li:first-child","#MV_A").addClass("active");
36
37slide_A.on('beforeChange', function(event, slick, currentSlide, nextSlide){
38	slide_A_catch.slick("slickGoTo",nextSlide);
39	$(".mvDots li","#MV_A").removeClass("active");
40	$(".mvDots li","#MV_A").eq(nextSlide).addClass("active");
41});
42$(".mvDots li","#MV_A").on("click",function(){
43	var target = $(".mvDots li","#MV_A").index(this);
44	slide_A.slick("slickGoTo",target);
45});
46$(".arr","#MV_A").on("click",function(){
47	if ($(this).hasClass("arrL")) {
48		slide_A.slick("slickPrev");
49	} else {
50		slide_A.slick("slickNext");
51	}
52});
53
54
55
56
57// slide B -----------------------------------------------------------------------------------
58var slide_B;
59var slide_B_catch;
60$("#MV_B").append('<ul class="mvDots"></ul>');
61$(".mvWrap","#MV_B").append('<div class="arr arrL"></div><div class="arr arrR"></div>');
62$(".image","#MV_B").each(function(){
63	$(".mvDots","#MV_B").append('<li></li>');
64});
65
66slide_B = $(".stage","#MV_B").slick({
67	dots: false,
68	arrows: false,
69	autoplay: true,
70	autoplaySpeed: 4000,
71	centerMode: true,
72	pauseOnHover: false,
73	speed: 800,
74	variableWidth: true
75});
76
77slide_B_catch = $(".catch","#MV_B").slick({
78	dots: false,
79	arrows: false,
80	autoplay: false,
81	draggable: false,
82	pauseOnHover: false,
83	fade: true,
84	swipe: false
85});
86
87$(".mvDots li:first-child","#MV_B").addClass("active");
88
89slide_B.on('beforeChange', function(event, slick, currentSlide, nextSlide){
90	slide_B_catch.slick("slickGoTo",nextSlide);
91	$(".mvDots li","#MV_B").removeClass("active");
92	$(".mvDots li","#MV_B").eq(nextSlide).addClass("active");
93});
94$(".mvDots li","#MV_B").on("click",function(){
95	var target = $(".mvDots li","#MV_B").index(this);
96	slide_B.slick("slickGoTo",target);
97});
98$(".arr","#MV_B").on("click",function(){
99	if ($(this).hasClass("arrL")) {
100		slide_B.slick("slickPrev");
101	} else {
102		slide_B.slick("slickNext");
103	}
104});
105
106
107
108
109// slide C -----------------------------------------------------------------------------------
110var slide_C;
111var slide_C_catch;
112$("#MV_C").append('<ul class="mvDots"></ul>');
113$(".mvWrap","#MV_C").append('<div class="arr arrL"></div><div class="arr arrR"></div>');
114$(".image","#MV_C").each(function(){
115	$(".mvDots","#MV_C").append('<li></li>');
116});
117
118slide_C = $(".stage","#MV_C").slick({
119	dots: false,
120	arrows: false,
121	autoplay: true,
122	autoplaySpeed: 4000,
123	centerMode: true,
124	pauseOnHover: false,
125	speed: 800,
126	variableWidth: true
127});
128
129slide_C_catch = $(".catch","#MV_C").slick({
130	dots: false,
131	arrows: false,
132	autoplay: false,
133	draggable: false,
134	pauseOnHover: false,
135	fade: true,
136	swipe: false
137});
138
139$(".mvDots li:first-child","#MV_C").addClass("active");
140
141slide_C.on('beforeChange', function(event, slick, currentSlide, nextSlide){
142	slide_C_catch.slick("slickGoTo",nextSlide);
143	$(".mvDots li","#MV_C").removeClass("active");
144	$(".mvDots li","#MV_C").eq(nextSlide).addClass("active");
145});
146$(".mvDots li","#MV_C").on("click",function(){
147	var target = $(".mvDots li","#MV_C").index(this);
148	slide_C.slick("slickGoTo",target);
149});
150$(".arr","#MV_C").on("click",function(){
151	if ($(this).hasClass("arrL")) {
152		slide_C.slick("slickPrev");
153	} else {
154		slide_C.slick("slickNext");
155	}
156});
157
158
159
160
161
162
163
164});