https://www.aeonbank.co.jp/app-files/js/parts.js

1/**
2 * parts.js
3 *
4 */
5
6"use strict";
7var u = new COMMON.Util();
8/**
9 * @method tabs
10 * - タブ切り替え
11 */
12function tabs() {
13  // vars
14  const factorElms = document.querySelectorAll('.js-tabs');
15  const tabNavi = '.js-tabs__navi';
16  const tabTrigger = '.js-tabs__trigger';
17  const tabPanel = '.js-tabs__panel';
18  const currentName = 'is-current';
19  // exit
20  if (!factorElms || factorElms.length === 0) { return false; }
21  // setting：表示設定
22  factorElms.forEach((elm) => {
23    const wrapElm = elm;
24    const naviElm = wrapElm.querySelector(tabNavi);
25    const triggerElms = naviElm.querySelectorAll(tabTrigger);
26    const panelElms = naviElm.nextElementSibling.querySelectorAll(`:scope > ${tabPanel}`);
27    const firstPanel = naviElm.querySelector(tabTrigger).getAttribute('href');
28    const firstNavElm = naviElm.querySelector(`a[href="${firstPanel}"]`);
29    const firstPanelElm = wrapElm.querySelector(firstPanel);
30    firstNavElm.parentNode.classList.add(currentName);
31    firstPanelElm.style.display = 'block';
32    // control
33    triggerElms.forEach((trigger) => {
34      trigger.addEventListener('click', (e) => {
35        e.preventDefault();
36        const target = wrapElm.querySelector(trigger.getAttribute('href'));
37        if (trigger.parentNode.classList.contains(currentName)) {
38          return false;
39        }
40        triggerElms.forEach((initTrigger) => {
41          initTrigger.parentNode.classList.remove(currentName);
42        });
43        panelElms.forEach((initPanel) => {
44          initPanel.style.display = 'none';
45        });
46        trigger.parentNode.classList.add(currentName);
47        target.style.display = 'block';
48        return false;
49      });
50    });
51  });
52}
53
54/**
55 * @method stepCarousel
56 * - ステップスライダー
57 */
58function stepCarousel() {
59  // vars
60  const factorElms = document.querySelectorAll('.js-step-carousel');
61  const bp1 = 768;
62  // exit
63  if (!factorElms || factorElms.length === 0) { return false; }
64
65  // setting
66  const settings = {
67    speed: 300,
68    loop: false,
69    pagination: {
70      // el   // initで設定
71      clickable: true,
72    },
73    slidesPerView: 1,
74    slidesPerGroup: 1,
75    spaceBetween: 16,
76    breakpoints: {
77      [bp1]: {
78         slidesPerView: 3,
79      },
80    },
81  };
82
83  // init
84  factorElms.forEach(elm => {
85    // vars
86    const swiperElm = elm.querySelector('.js-step-carousel__swiper');
87    const pagerElm = elm.querySelector('.js-step-carousel__pager');
88    const swiperWrapperElm = swiperElm.querySelector('.swiper-wrapper');
89    const swiperSlideElm = swiperWrapperElm.querySelectorAll('.swiper-slide');
90    const carouselNum = swiperSlideElm.length;
91
92    // setting
93    settings.pagination.el = pagerElm;
94
95    const swiper = new Swiper(swiperElm, settings);
96    const minLength = u.isRangePC() ? 3 : 1;
97    if (minLength >= carouselNum) {
98      elm.classList.add('is-disabled');
99      swiper.loop = false;
100      swiper.allowTouchMove = false;
101      swiper.autoplay.stop();
102    }
103  });
104}
105
106/**
107 * @method campaignCarousel
108 * - キャンペーンスライダー
109 */
110function campaignCarousel() {
111  // vars
112  const factorElms = document.querySelectorAll('.js-campaign-carousel');
113  // exit
114  if (!factorElms || factorElms.length === 0) { return false; }
115
116  // setting
117  const settings = {
118    speed: 300,
119    loop: true,
120    autoplay: {
121      delay: 4000,
122      disableOnInteraction: false,
123    },
124    pagination: {
125      // el   // initで設定
126      clickable: true,
127    },
128    slidesPerView: 1,
129    slidesPerGroup: 1,
130    spaceBetween: 16,
131  };
132
133  // init
134  factorElms.forEach(elm => {
135    // vars
136    const swiperElm = elm.querySelector('.js-campaign-carousel__swiper');
137    const pagerElm = elm.querySelector('.js-campaign-carousel__pager');
138
139    // setting
140    settings.pagination.el = pagerElm;
141
142    const swiper = new Swiper(swiperElm, settings);
143  });
144}
145
146/**
147 * @execution
148 */
149document.addEventListener("DOMContentLoaded", () => {
150  tabs();
151  stepCarousel();
152  campaignCarousel();
153});