https://nigewaka.run/assets/js/nigewaka_site.story.js

1'use strict';
2window.addEventListener('load', function () {
3  storySwiper.init();
4  storyImageSwiper.init();
5});
6
7const storySwiper = {
8  instance: null,
9  $elm: '.js-story-slide',
10  config: {
11    speed: 800,
12    slidesPerView: 'auto',
13    initialSlide: document.querySelectorAll('.js-story-slide-pagination').length - 1,
14    centeredSlides: true,
15    hashNavigation: true,
16    on: {
17      slideChange: function (swiper) {
18        document.querySelectorAll('.js-story-slide-pagination').forEach(($item) => {
19          $item.classList.remove('is-active');
20        });
21        document.querySelectorAll('.js-story-slide-pagination')[swiper.realIndex].classList.add('is-active');
22      },
23    },
24    breakpoints: {
25      900: {
26        spaceBetween: 60,
27      },
28    },
29  },
30  set() {
31    this.instance = new Swiper(this.$elm, this.config);
32    document.querySelectorAll('.js-story-slide-pagination').forEach(($item) => {
33      $item.addEventListener('click', () => {
34        this.instance.slideTo($item.dataset.slideNav - 1);
35      });
36    });
37  },
38  init() {
39    this.set();
40  },
41};
42const storyImageSwiper = {
43  $elm: '.js-story-image-slide',
44  $pagination: '.js-story-image-pagination',
45
46  set() {
47    document.querySelectorAll(this.$elm).forEach(($item, index) => {
48      $item.classList.add('js-story-image-slide-'.concat(index + 1));
49    });
50    document.querySelectorAll(this.$pagination).forEach(($item, index) => {
51      $item.classList.add('js-story-image-pagination-'.concat(index + 1));
52    });
53    for (let i = 0; i < document.querySelectorAll(this.$elm).length; i++) {
54      new Swiper('.js-story-image-slide-'.concat(i + 1), {
55        speed: 800,
56        slidesPerView: 'auto',
57        centeredSlides: true,
58        allowTouchMove: false,
59        lazy: true,
60        pagination: {
61          el: '.js-story-image-pagination-'.concat(i + 1),
62          clickable: true,
63        },
64        autoplay: {
65        delay: 3000,
66        },
67        speed: 1000,
68        effect: 'fade', 
69      });
70    }
71  },
72  init() {
73    this.set();
74  },
75};