https://gumpla.jp/wp-content/themes/gush/assets/js/story.js

1$(function () {
2  $("div.keen-slider").each(function () {
3    var num = $(this).find("img").length;
4    if (num == 1) {
5      $(this).addClass("arrow-none");
6    }
7  });
8});
9
10if (document.getElementById("arrow-left") && document.getElementById("arrow-right")) {
11  var slider = new KeenSlider("div.keen-slider", {
12    slidesPerView: 1,
13    spacing: 16,
14    mode: "snap",
15    centered: true,
16    loop: true,
17    breakpoints: {
18      "(min-width: 768px)": {
19        slidesPerView: 1.5,
20        spacing: 16,
21        mode: "snap",
22        centered: true,
23        loop: true,
24      },
25    },
26    created: function (instance) {
27      document.getElementById("arrow-left").addEventListener("click", function () {
28        instance.prev();
29      });
30
31      document.getElementById("arrow-right").addEventListener("click", function () {
32        instance.next();
33      });
34      updateClasses(instance);
35      updateSliderContent(instance);
36    },
37    slideChanged: function (s) {
38      updateClasses(s);
39      updateSliderCount(s);
40      updateSliderContent(s);
41    },
42  });
43}
44
45function updateClasses(instance) {
46  var slide = instance.details().relativeSlide;
47  var arrowLeft = document.getElementById("arrow-left");
48  var arrowRight = document.getElementById("arrow-right");
49  slide === 0 ? arrowLeft.classList.add("arrow--disabled") : arrowLeft.classList.remove("arrow--disabled");
50  slide === instance.details().size - 1 ? arrowRight.classList.add("arrow--disabled") : arrowRight.classList.remove("arrow--disabled");
51}
52
53function updateSliderCount(instance) {
54  if (instance && instance.details) {
55    var sliderCount = document.querySelector(".slider-count");
56    if (sliderCount) {
57      // .slider-countが存在する場合のみ処理を行う
58      var currentSlide = instance.details().relativeSlide + 1;
59      var totalSlides = instance.details().size;
60      sliderCount.textContent = currentSlide + " / " + totalSlides;
61    }
62  }
63}
64
65function updateSliderContent(instance) {
66  var currentSlideIndex = instance.details().relativeSlide;
67  var slides = document.querySelectorAll("div.keen-slider .keen-slider__slide");
68  var currentSlide = slides[currentSlideIndex];
69  var title = currentSlide.querySelector("img").getAttribute("data-title");
70  var tag = currentSlide.querySelector("img").getAttribute("data-tag");
71  var status = currentSlide.querySelector("img").getAttribute("data-status");
72  if (title) {
73    var h2Element = document.querySelector(".xmodal-body__inner h2");
74    if (h2Element) {
75      h2Element.textContent = title;
76    }
77  }
78  if (tag) {
79    var linkElement = document.querySelector(".slide-link");
80    if (linkElement) {
81      linkElement.href = "/tag/" + encodeURIComponent(tag);
82    }
83    var hiddenInput = document.querySelector('input[name="referrer_tags"]');
84    if (hiddenInput) {
85      hiddenInput.value = tag;
86    }
87  }
88  if (title) {
89    var h2Element = document.querySelector(".slide-status");
90    if (h2Element) {
91      h2Element.textContent = status;
92    }
93  }
94}