https://www.namiboshisha.jp/js/15/top.js?u=2026031317

1$(function(){
2  // ビッグバナー対応
3  if($("#eyecatch").length) {
4    if($("#eyecatch .swiper-slide").length > 1) {
5      // バナー画像が2つ以上 → スライド設定
6      var galleryTop = new Swiper('#eyecatch .swiper-container', {
7        loop: true, // 繰り返し指定
8        centeredSlides : true,
9        autoplay: {
10          // 10秒後に次の画像へ
11          delay: 10000,
12          // ユーザー操作後に自動再生を再開する
13          disableOnInteraction: false
14        },
15        slidesPerView: 3,
16        pagination: {
17          // 円形のページネーションを有効にする
18          el: "#eyecatch .swiper-pagination",
19          // クリックを有効にする
20          clickable: true
21        },
22        breakpoints: {
23          768: {
24            slidesPerView: 1,
25          }
26        }
27      });
28      $("#eyecatch").addClass('show');
29    } else {
30      // バナー画像が1つ → 静的な
31      $("#eyecatch").addClass('static');
32      $("#eyecatch").addClass('show');
33    }
34  }
35
36  // おすすめ書誌 スライド
37  if($("#pickup").length) {
38    if($("#pickup .swiper-slide").length > 1) {
39      // バナー画像が2つ以上 → スライド設定
40      var pickup = new Swiper('#pickup .swiper-container', {
41        loop: true, // 繰り返し指定
42        centeredSlides : true,
43        autoplay: {
44          // 10秒後に次の画像へ
45          delay: 10000,
46          // ユーザー操作後に自動再生を再開する
47          disableOnInteraction: false,
48          pauseOnMouseEnter: true
49        },
50        effect: "coverflow",
51        grabCursor: true,
52        coverflowEffect: {
53          rotate: 20,
54          stretch: 0,
55          depth: 200,
56          modifier: 1,
57          slideShadows: true,
58        },
59        slidesPerView: 4,
60        pagination: {
61          // 円形のページネーションを有効にする
62          el: "#pickup .swiper-pagination",
63          // クリックを有効にする
64          clickable: true
65        },
66        navigation: {
67          nextEl: '#pickup .swiper-button-next',
68          prevEl: '#pickup .swiper-button-prev',
69        },
70        breakpoints: {
71          768: {
72            slidesPerView: 3,
73          },
74          480: {
75            slidesPerView: 2.5,
76          }
77        }
78      });
79
80      // スライドの画像の読み込みが完了した
81      $(window).on('load', function () {
82        // .image の高さを最大の高さに合わせる → テキスト部分が隣の書影にかぶるため
83        // → 実際は .content の margin-top を調整する
84        // 高さの最大値取得。加えて 全体の高さも設定する。
85        var mh = getHeight();
86
87        // 高さの最大値によって margin-topを設定 → カレントと両端のみ
88        setMargin(mh);
89
90        // 画面サイズが変わった → 最大サイズ 再取得
91        pickup.on('resize', function () {
92          // 高さ 再取得。加えて 全体の高さも設定する。
93          mh = getHeight();
94          // 高さの最大値によって margin-topを設定 → カレントと両端のみ
95          setMargin(mh);
96        });
97
98        // スライドが切り替わった
99        pickup.on('slideChange', function () {
100          // 高さの最大値によって margin-topを設定 → カレントと両端のみ
101          setMargin(mh);
102        });
103
104        /**
105         * [getHeight 高さの最大値を取得。加えて 全体の高さも設定する。]
106         * @return {[int]} [高さの最大値]
107         */
108        function getHeight() {
109          var mh = 0;
110          var ih = 0;
111          $("#pickup .swiper-slide").each(function(){
112            if(mh < $(this).find('.image img').height()) {
113              mh = $(this).find('.image img').height();
114            }
115            $(this).addClass('temporary');
116            if(ih < $(this).height()) {
117              ih = $(this).height();
118            }
119            $(this).removeClass('temporary');
120
121            // 全体の高さ設定
122            // → スライドが切り替わった際に高さがガタガタするのを防ぐ
123            $("#pickup .inner").height(ih + 50);
124          });
125
126          return mh;
127        }
128
129        /**
130         * [setMargin 高さの最大値によって margin-topを設定 → カレントと両端のみ]
131         * @param {[int]} mh [高さの最大値]
132         */
133        function setMargin(mh) {
134          // カレントのindex取得
135          var index = $("#pickup .swiper-slide.swiper-slide-active").index();
136
137          // カレントの.imageの高さを取得し、.contentのmargin-topの値を計算して設定
138          // → 左右ボタンでの切り替え、ドラッグでの切り替えによって
139          // イベント発火時点のカレントが違うため 両端の値を設定する
140          // → すべて一度に設定しようとすると .imageの高さが0のものがあるため難しい
141          var mt = mh - $("#pickup .swiper-slide:eq(" + index +") .image").height();
142          $("#pickup .swiper-slide:eq(" + index +") .content").css('marginTop',mt);
143
144          mt = mh - $("#pickup .swiper-slide:eq(" + (index - 1) +") .image").height();
145          $("#pickup .swiper-slide:eq(" + (index - 1) +") .content").css('marginTop',mt);
146
147          mt = mh - $("#pickup .swiper-slide:eq(" + (index + 1) +") .image").height();
148          $("#pickup .swiper-slide:eq(" + (index + 1) +") .content").css('marginTop',mt);
149        }
150      });
151      $("#pickup").addClass('show');
152    } else {
153      // 書誌が1つ → 静的な
154      $("#pickup").addClass('static');
155      $("#pickup").addClass('show');
156    }
157  }
158});