https://woorisavingsbank.com/resources/normal/js/jquery/main_slider.js

1$(document).ready(function () {
2    $('#fullpage').fullpage({
3        anchors: ['section01', 'section02', 'section03', 'section04', 'section05', 'section06', 'footer'],
4        navigation: true,
5        navigationTooltips: ['예금상품', '대출상품', '통합검색', '은행소개', '고객센터', 'ABOUT'],
6        showActiveTooltip: true,
7        navigationPosition: 'left',
8        keyboardScrolling: true
9    });
10});
11// 접근성이후 메인페이지 슬라이드 오토 적용하기
12$(function () {
13    var swiper1 = new Swiper('.depositbox_wrap', {
14        slidesPerView: 5,
15        spaceBetween: 0,
16        pagination: {
17            el: '.dots'
18        },
19        navigation: {
20            nextEl: '.section01 .rotate-btn.next',
21            prevEl: '.section01 .rotate-btn.prev'
22        },
23        loop: true,
24        loopAdditionalSlides: 1,
25        centeredSlides: true,
26        autoplay: {
27            delay: 3000,
28            disableOnInteraction: false
29        },
30        on: {
31            slideChange: function () {
32                setTimeout(() => {
33                    slideShow();
34                }, 400);
35            }
36        }
37    });
38    $('.section01 .depositbox_wrap_ct .play').on('click', function () {
39        swiper1.autoplay.start();
40        return false;
41    });
42    $('.section01 .depositbox_wrap_ct .stop').on('click', function () {
43        swiper1.autoplay.stop();
44        return false;
45    });
46
47    // 접근성
48    $('.section01 .swiper-slide a').on('focus', function () {
49        swiper1.autoplay.stop();
50        $('.section01 .swiper-slide').removeClass('swiper-slide-active');
51        $(this).closest('.swiper-slide').addClass('swiper-slide-active');
52        return false;
53    });
54    // 접근성
55    $('.section01 .swiper-slide a').on('blur', function () {
56        $('.section01 .swiper-slide').removeClass('swiper-slide-active');
57    });
58
59    // 접근성
60    function slideShow() {
61        const buttons = document.querySelectorAll('.section01 .slider');
62        const activeIndex = Array.from(buttons).findIndex(button => button.classList.contains('swiper-slide-active'));
63
64        const startIndex = Math.max(0, activeIndex - 2);
65        const endIndex = Math.min(buttons.length - 1, activeIndex + 2);
66
67        for (let i = 0; i < buttons.length; i++) {
68            const item = buttons[i].querySelector('.section01 .item');
69            if (i >= startIndex && i <= endIndex) {
70                buttons[i].classList.add('show');
71                item.tabIndex = 0;
72            } else {
73                buttons[i].classList.remove('show');
74                item.tabIndex = -1;
75            }
76        }
77    }
78
79    // 접근성
80    let $slides = document.querySelectorAll('.depositbox_wrap .swiper-slide');
81    for (let i of $slides) {
82        i.addEventListener('mouseover', function () {
83            swiper1.autoplay.stop();
84        });
85        i.addEventListener('mouseout', function () {
86            swiper1.autoplay.start();
87        });
88    }
89
90    var swiper3 = new Swiper('.section02_swiper', {
91        slidesPerView: 4,
92        loop: true,
93        navigation: {
94            nextEl: '.section02 .rotate-btn.next',
95            prevEl: '.section02 .rotate-btn.prev'
96        },
97        loopAdditionalSlides: 1, 
98        // 추가 속성
99        autoplay: {
100            delay: 3000,
101            disableOnInteraction: false
102        },
103        on: {
104            slideChange: function () {
105                setTimeout(() => {
106                    slideShow2();
107                }, 400);
108            }
109        }
110    });
111    $('.section02 .depositbox_wrap_ct .play').on('click', function () {
112        swiper3.autoplay.start();
113        return false;
114    });
115    $('.section02 .depositbox_wrap_ct .stop').on('click', function () {
116        swiper3.autoplay.stop();
117        return false;
118    });
119    setTimeout(() => {
120        // 접근성
121        $('.section02 .swiper-slide a').on('focus', function () {
122            swiper3.autoplay.stop();
123            $('.section02 .swiper-slide').removeClass('swiper-slide-active');
124            $(this).closest('.swiper-slide').addClass('swiper-slide-active');
125            return false;
126        });
127        // 접근성
128        $('.section02 .swiper-slide a').on('blur', function () {
129            $('.section02 .swiper-slide').removeClass('swiper-slide-active');
130        });
131    }, 300);
132
133    let $slides2 = document.querySelectorAll('.section02_swiper .swiper-slide');
134    for (let i of $slides2) {
135        i.addEventListener('mouseover', function () {

136            swiper3.autoplay.stop();
137        });
138        i.addEventListener('mouseout', function () {
139            swiper3.autoplay.start();
140        });
141    }
142    // 메인페이지 섹션2 대출슬라이드
143    function slideShow2() {
144        const buttons2 = document.querySelectorAll('.section02 .slider');
145        const activeIndex2 = Array.from(buttons2).findIndex(button => button.classList.contains('swiper-slide-active'));
146
147        const startIndex2 = Math.max(0, activeIndex2);
148        const endIndex2 = Math.min(buttons2.length - 1, activeIndex2 + 3);
149
150        for (let i = 0; i < buttons2.length; i++) {
151            const item2 = buttons2[i].querySelector('.section02 .item');
152            if (i >= startIndex2 && i <= endIndex2) {
153                buttons2[i].classList.add('show');
154                item2.tabIndex = 0;
155            } else {
156                buttons2[i].classList.remove('show');
157                item2.tabIndex = -1;
158            }
159        }
160    }
161
162    // SECTION02 SWIPER
163    var swiper2 = new Swiper('.sec20Swiper', {
164        spaceBetween: 25,
165        direction: 'vertical',
166        slidesPerView: 4,
167        autoplay: true,
168        loop: true,
169        navigation: {
170            nextEl: '.플래이앱솔2',
171            prevEl: '.플래이앱솔1'
172        },
173        on: {
174            slideChange: function () {
175                // 현재 슬라이드의 인덱스를 가져옵니다.
176                var activeIndex = this.activeIndex;
177
178                // 모든 슬라이드에서 active 클래스를 제거합니다.
179                $('.swiper-slide').removeClass('active');
180
181                // 현재 슬라이드에 active 클래스를 추가합니다.
182                $('.swiper-slide').eq(activeIndex).addClass('active');
183            }
184        }
185    });
186
187    //SECTION05 SWIPER
188    var swiper5 = new Swiper('.sec6Swiper', {
189        slidesPerView: 3,
190        // centeredSlides: true,
191        roundLengths: true,
192        // loop: true,
193        spaceBetween: 60,
194        // loopAdditionalSlides: 100,
195        autoplay: true,
196        navigation: {
197            nextEl: '.section06 .rotate-btn.next',
198            prevEl: '.section06 .rotate-btn.prev'
199        },
200        on: {
201            slideChange: function () {
202                setTimeout(() => {
203                    slideShow6();
204                }, 400);
205            }
206        }
207    });
208    $('.section06 .depositbox_wrap_ct .play').on('click', function () {
209        swiper5.autoplay.start();
210        return false;
211    });
212    $('.section06 .depositbox_wrap_ct .stop').on('click', function () {
213        swiper5.autoplay.stop();
214        return false;
215    });
216    $('.section06 .swiper-slide a').on('focus', function () {
217        swiper5.autoplay.stop();
218        $('.section06 .swiper-slide').removeClass('swiper-slide-active');
219        $(this).closest('.section06 .swiper-slide').addClass('swiper-slide-active');
220        return false;
221    });
222    // 접근성
223    $('.section06 .swiper-slide a').on('blur', function () {
224        $('.section06 .swiper-slide').removeClass('swiper-slide-active');
225    });
226});
227function slideShow6() {
228    const buttons6 = document.querySelectorAll('.section06 .sns-slide');
229    const activeIndex6 = Array.from(buttons6).findIndex(button => button.classList.contains('swiper-slide-active'));
230
231    const startIndex6 = Math.max(0, activeIndex6 - 1);
232    const endIndex3 = Math.min(buttons6.length - 1, activeIndex6 + 1);
233
234    for (let i = 0; i < buttons6.length; i++) {
235        const item2 = buttons6[i].querySelector('.section06 .swiper-item01');
236        if (i >= startIndex6 && i <= endIndex3) {
237            buttons6[i].classList.add('show');
238            item2.tabIndex = 0;
239        } else {
240            buttons6[i].classList.remove('show');
241            item2.tabIndex = -1;
242        }
243    }
244}