https://www.lycorp.co.jp/ja/kv2.js

1const keyVisual = {
2	slideContainer: document.querySelector("#KV"),
3	slideTranck: document.querySelector("#KV .splide__track"),
4	mvImages: document.querySelectorAll(".mission-value .pictureWrapper"),
5	mvWrapper: null,
6	mvLoopIndex: 0,
7	mvLoopMax: 0,
8	duration: 5000,
9	prevPos: 0,
10
11	init: function() {
12		this.mvLoopMax = this.mvImages.length,
13		splide = new Splide(this.slideContainer, {
14			type: 'loop',
15			gap: '48px',
16			padding: '0',
17			drag: false,
18			pagination: true,
19			paginationKeyboard: true,
20			arrows: false,
21			autoplay: true,
22			speed: 500,
23			interval: this.duration,
24			pauseOnHover: false,
25			pauseOnFocus: false,
26			resetProgress: false,
27			easing: 'cubic-bezier(.16,.64,.48,1)',
28			lazyLoad: 'sequential',
29			breakpoints: {
30				1024: {
31					gap: '10px',
32					padding: '0px',
33					drag: 'free',
34					snap: true,
35					speed: 800,
36					easing: 'cubic-bezier(.56,.16,.24,1)',
37				},
38			},
39			i18n: {
40				slideX: '%s個目の記事',
41				pageX: '%s個目の記事',
42				play: '自動再生スタート',
43				pause: '自動再生停止',
44				slide: 'キービジュアル',
45				slideLabel: '%s個目（全%s個）',
46				select: 'キービジュアルの選択ができます',
47				carousel: 'スライダー',
48			},
49		});
50		splide.on("ready", () => {
51			this.mvImages.forEach( (el,index) => { 
52				if(index != 0) {
53					el.classList.add("idle");
54				}
55				else{
56					this.mvImages[0].classList.add("top");
57				}
58			});
59			this.mvWrapper = document.querySelectorAll(".splide__list li.is-active.is-visible")[0];
60			this.animateKV();
61		});
62		splide.mount();
63		splide.on("move", () => {
64			if(this.prevPos != splide.index && splide.index == 0) this.changeKV();
65		});
66		splide.on("moved", () => {
67			if (this.prevPos != splide.index && splide.index == 0) this.animateKV();
68			this.prevPos = splide.index;
69		});
70		// splide.on("visible", (el) => {
71		// 	el.slide.tabIndex = 0;
72		// });
73		// splide.on("hidden", (el) => {
74		// 	el.slide.tabIndex = -1;
75		// });
76	},
77
78	animateKV: function(){
79		this.mvWrapper.classList.add("is-in");
80		this.mvImages[0].addEventListener("transitionend", () => {
81			this.slideTranck.classList.add("off");
82		},{"once": true});
83	},
84
85	changeKV: function(){
86		this.mvWrapper.classList.remove("is-in");
87		this.mvImages.forEach( (el,index) => {
88			el.classList.remove("top","under","idle");
89			if(index == this.mvLoopIndex){
90				this.mvImages[index].classList.add("under");
91			}
92			else if(index == this.mvLoopIndex + 1){
93				this.mvImages[index].classList.add("top");
94			}
95			else{
96				this.mvImages[index].classList.add("idle");
97			}
98		});
99		if(this.mvLoopIndex == this.mvLoopMax - 1) {
100			this.mvLoopIndex = 0;
101			this.mvImages[0].classList.remove("idle");
102			this.mvImages[0].classList.add("top");
103		}
104		else{
105			this.mvLoopIndex ++;
106		}
107	}
108}