swiperのbreakpointsが思うようにいきません。

jQueryのプラグインとしてswiperを使用しているのですが、breakpointsのところが上手くいっておりません。
jQueryのコードとしてbreakpointsを768以下としての処理を書いているつもりなのですが、768以上のときにbreakpointsの中身が適用されています。
これが何の原因で、どこが不適切なのか知りたいです。

ご回答いただければ幸いです。

コードは以下の通りです。

html
1  <!-- results -->
2  <section class="results" id="results">
3    <h2 class="title white">Results</h2>
4    <!-- カルーセル -->
5    <div class="swiper-container">
6      <ul class="swiper-wrapper">
7        <li class="swiper-slide">
8          <a href="" class="results-item">
9            <figure>
10              <img src="img/slide1.png" alt="">
11            </figure>
12            <div class="results-text">
13              <h3>とかくに人の世は住みにくい。</h3>
14              <p>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
15            </div>
16          </a>
17        </li>
18        ・・・

scss
1.swiper-container {
2    .swiper-wrapper {
3      .swiper-slide {
4        transition: all 0.2s;
5        &:hover {
6          opacity: 0.7;
7        }
8        .results-item {
9          figure {
10            display: block;
11            margin: 0;
12            img {
13              width: 100%;
14              vertical-align: bottom;
15            }
16          }
17          .results-text {
18            background-color: #fff;
19            color: #3e3e3e;
20            padding: 17px 20px 20px;
21            h3 {
22              font-size: 2rem;
23              font-weight: bold;
24            }
25            p {
26              margin-top: 18px;
27              font-size: 1.6rem;
28              line-height: 1.5;
29              text-align: justify;
30            }
31          }
32        }
33      }
34    }
35  }
36　・・・

レスポンシブ時です⇓

scss
1@media screen and (max-width: 768px) {
2　・・・
3    .swiper-container {
4      .swiper-wrapper {
5        .swiper-slide {
6          &:hover {
7            opacity: 1;
8          }
9          .results-item {
10            figure {
11            }
12            .results-text {
13              padding: 15px;
14              h3 {
15                font-size: 1.5rem;
16              }
17              p {
18                font-size: 1.2rem;
19              }
20            }
21          }
22        }
23      }
24    }
25　・・・
26}

jQuery
1$(function () {
2  new Swiper( '.swiper-container', {
3    speed: 400,
4    spaceBetween: 40,
5    width: 422,
6    loop: true,
7    loopedSlides: 6,
8    pagination: {
9      el: '.swiper-pagination',
10      type: 'bullets',
11      clickable: true,
12    },
13    breakpoints: {
14      768: {
15        slidesPerView: 1.5,
16        spaceBetween: 24,
17      }
18    }
19  });
20});

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

回答1件

ベストアンサー

仕様通りでは？

js
1  breakpoints: {
2    // when window width is >= 320px
3    320: {
4      slidesPerView: 2,
5      spaceBetween: 20
6    },
7    // when window width is >= 480px
8    480: {
9      slidesPerView: 3,
10      spaceBetween: 30
11    },
12    // when window width is >= 640px
13    640: {
14      slidesPerView: 4,
15      spaceBetween: 40
16    }
17  }

Swiper Parameters | Swiper API

投稿2020/05/21 05:35

Lhankor_Mhy

総合スコア36134

NDvP2OWLAoccEfQ

2020/05/21 06:31

ご回答ありがとうございます！そのような仕様になっているですね！しかし、こちらの記事では787以下になっています。 [Qiita](https://qiita.com/vangelo/items/f22f9cc13fcb5e1a9f41) どこに相違があるのかが分かりません。

NDvP2OWLAoccEfQ

2020/05/21 06:32

https://qiita.com/vangelo/items/f22f9cc13fcb5e1a9f41 すみません。これが正しい方のリンクです。

Lhankor_Mhy

2020/05/21 06:49 編集

>breakpointsInverse parameter has been removed and now breakpoints behave like with breakpointsInverse: true before. https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md#swiper-500---released-on-september-17th-2019 だそうです。これまでのデフォルト値が false なので、結構ひどい変更ですね。

NDvP2OWLAoccEfQ

2020/05/22 04:07

要するにbreakpointsは以下ではなく、以上での仕様になっているのでしょうか？理解力がなくてすみません。

Lhankor_Mhy

2020/05/22 04:11

>以上での仕様になっている 2019年9月17日アップデートのバージョン5.0.0以降では、その通りです。それ以前のバージョンでは、デフォルトで「以下」ですが、オプションで「以上」に変更できる、ということです。

NDvP2OWLAoccEfQ

2020/05/22 04:36

そーゆーことなんですね！ありがとうございます。すみません、最後にお聞きしたいのですが、バージョン5.0.0以降で「以下」にするオプションはどのようにすればよいですか？breakpointsのところをできれば以下にしたいので

Lhankor_Mhy

2020/05/22 04:43

できない、と思います。