SwiperクラスのWeb実装 @mediaの使い方

ページがある程度の大きさの時は単純に横並びの画像を
あるサイズ以下になった場合はスマートフォン用サイト設定でSwiper機能を実装したいと思っております。

調べたこと）
SwiperクラスはJavascript内でnew Swiperを作成することで機能する。
サイズに応じて挙動を変えるには、cssで@mediaを用いればよい。

現状はSwiperが機能しない状態です。最低限このサイズ以上である場合の、という@media内は「画像を横並び固定」にしたいと思ってflexにしたのですが、設定が分からなくなってしまいました。

上記の点ご教示いただけますと幸いです。お手柔らかによろしくお願いいたします。

HTML

<section class="brand"> <h2>Swiper実験</h2> <div class="swiper"> <div class="swiper-wrapper"> <div class="container"> <div class="swiper-slide"><img src="img/swiper_1.png"></div> <div class="swiper-slide"><img src="img/swiper_2.png"></div> <div class="swiper-slide"><img src="img/swiper_3.png"></div> <div class="swiper-slide"><img src="img/swiper_4.png"></div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </section> <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

Javascript

const swiper = new Swiper(".swiper", { loop: true, slidesPerView: 2.0, spaceBetween: 10, centeredSlides : true, pagination: { el: ".swiper-pagination" }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, breakpoints: { 860: { slidesPerview: 4, spaceBetween: 0 } }});

CSS

/* PC screen */ @media (min-width: 768px) { .brand .container{ display: flex; flex } } .swiper-wrapper { width: 100%; height: 300px;} .swiper-slide { color: #ffffff; width: 100%; height: 100%; text-align: center; line-height: 300px;}