swiperが動きません。

swiperを実装しようとしましたが、動きません。

swiperをCDNで読み込んで実装しようとしています。デザインは思った通りになりましたが、矢印を押しても反応がありません。

発生している問題・エラーメッセージ

スライド、矢印など表示されますが、クリックには反応がありません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>sample</title>
7        <meta name="description" content=" ">
8        <!-- CSS -->
9        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
10        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
11        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
12        <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
13        <link rel="stylesheet" href="./css/style.css">
14
15        <!-- FontAwesome -->
16        <script src="https://kit.fontawesome.com/4beb341d93.js" crossorigin="anonymous"></script>
17        <!--JS-->
18        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
19
20    </head>
21    <body>
22        <main>
23        <section class="box">
24            <div class="swiper">
25             <div class="swiper-wrapper">
26              <div class="swiper-slide">01<br>sample</div>
27              <div class="swiper-slide">02<br>sample</div>
28              <div class="swiper-slide">03<br>sample</div>
29              <div class="swiper-slide">04<br>sample</div>
30              <div class="swiper-slide">05<br>sample</div>
31             </div>
32  <div class="swiper-button-prev"></div>
33  <div class="swiper-button-next"></div>
34  <div class="swiper-pagination"></div>
35</div>
36        </section>
37        </main>
38        <!-- JS -->
39        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
40        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
41        <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
42        <script src="./js/slideshow.js"></script>
43        <script src="./js/carousel.js"></script>
44        <script src="./js/hamburger.js"></script>
45        <script src="./js/accordion.js"></script>
46        <script src="./js/fadein.js"></script>
47        <script src="./js/swiper.js"></script>
48    </body>
49</html>

css
1.swiper {
2  width: 100%;
3  height: 200px;
4  text-align: center;
5  @include fz_vw(20);
6}
7
8.swiper-wrapper{
9    margin:3.5rem auto !important;
10    transition-duration: 100ms !important;
11}
12
13.swiper-slide {
14  border: 5px solid $l-blue;
15  border-radius:30px;
16  box-shadow: 0px 10px 10px 0px rgba(32, 32, 32, 0.2);
17  height: 50% !important;
18  width:70% !important;
19  
20}
21
22
23/* 前ページ、次ページボタン共通のスタイル */
24.swiper-button-prev,
25.swiper-button-next {
26 position: absolute;
27 top: 85% !important;
28 width: calc(var(--swiper-navigation-size) / 44 * 126) !important;
29 height: var(--swiper-navigation-size);
30 margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
31 z-index: 10;
32 cursor: pointer;
33 display: flex;
34 align-items: center;
35 justify-content: center;
36 //color: var(--swiper-navigation-color, var(--swiper-theme-color));
37 width: 48px; /* ボタンの幅 */
38 height: 48px; /* ボタンの高さ */
39 background-size: 48px 48px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
40 margin-top: -24px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
41}
42
43.swiper-button-next {
44	background-image: url(../images/arrowBtn.png);
45	background-size:contain;
46    background-position:center center;
47    background-repeat:no-repeat;
48}
49
50.swiper-button-prev {
51	background-image: url(../images/arrowBtn.png);
52	transform: scale(-1, 1);
53	background-size:contain;
54    background-position:center center;
55    background-repeat:no-repeat;
56}
57
58.swiper-button-prev:after,
59.swiper-button-next:after {
60    display:none;
61 font-family: swiper-icons;
62 font-size: var(--swiper-navigation-size);
63 text-transform: none !important;
64 letter-spacing: 0;
65 text-transform: none;
66 font-variant: initial;
67}
68.swiper-button-prev:after,
69.swiper-container-rtl .swiper-button-next:after {
70 content: "";
71}
72
73.swiper-button-next:after,
74.swiper-container-rtl .swiper-button-prev:after {
75 content: "";
76}
77
78.swiper-pagination{
79    top:76%;
80}

js
1new Swiper('.swiper', {
2  slidesPerView: 1.5,
3  spaceBetween: 30,
4  centeredSlides: true,
5  pagination: {
6    el: '.swiper-pagination',
7    type: 'fraction',
8    formatFractionCurrent: function (n) {
9        return '0' + n;
10    },
11    formatFractionTotal: function (number) {
12        return '0' + number;
13    }
14  },
15  navigation: {
16    nextEl: '.swiper-button-next',
17    prevEl: '.swiper-button-prev',
18  },
19});

試したこと

javascript, cssファイルの読み込み順、パスの記述ミス、htmlへの直接記述、transition-durationを個別に指定、など試してみましたが改善しませんでした。

補足情報（FW/ツールのバージョンなど）

swiperはver.7を使用しています。

Lhankor_Mhy

2021/12/13 01:43

ご提示のコードをCSSを除いて試してみましたが、問題なく動作しました。 CSSに問題があるかもしれませんので、ミックスインとCSS変数定義をご提示ください。

hiro3119

2021/12/13 13:43

ありがとうございます。ご指摘の通り、CSSでpaginationのwidthが100%のまま、navigationの高さを揃えていたことが原因でクリックに反応しなくなっていたようです。今後ともどうぞよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

paginationとnavigationが重なったかも知れないです。

chrome dev toolsで適応してるCSS確認してください。navigationがpaginationの下になって、クリックできないだと思います。

試しに、test-button-nextでクラスを作ってみた、サンプルはこちらです。

https://jsfiddle.net/heroyct/bj8wk6ac/29/

投稿2021/12/13 09:21

heroyct

総合スコア434

hiro3119

2021/12/13 13:42 編集

ありがとうございました。ご指摘の通り、navigationの位置を変えると動きました。ただ、デザインとしてはpaginationの両隣にnavigationを配置したかったので、paginationのwidthを50%に指定したところ、思い通りの位置に配置しても動くようになりました。ありがとうございました。今後ともどうぞよろしくお願い致します。

行動規範の内容に同意します