Swiper：流れ続けるスライダー

実装の手順

①：swiperのサイトからCDNをコピーぺする
https://swiperjs.com/get-started
CSSタグは自身で設定したreset.css style.cssの上に記述
scriptタグは自身で設定したscriptタグの上に記述
（swiperはJQueryに依存していないので、JQueryのscriptの上下どちらでも大丈夫！）
②：HTML と　jsのコードをコピペする
③：②のHTMLにデザインに合わせてHTMLを追加、クラス追加し、CSSで装飾する
その際、デフォルトで当たっているアイコン的なもの（横スライドのための三角や、下のドット）を検証ツールでみつけ、その値を追加したクラス名をつかって上書きする。
ex. display:none でafter要素で装飾されている三角アイコンを消してbackground:url(./アイコン画像)で指定したいアイコンを追加する
④：jsの動きは新たにidを追加し（id=”js- “）、②もともとのスライダーの対象クラスをidに変更する
（同サイトで他にスライダーを実装した時にかぶらないように）

参考オプションサイト↓

【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK

  const swiper = new Swiper(".swiper", {
    direction: "horizontal", // スライドの移動方向を水平方向に設定
    loop: true, // スライドが最後に達した後、最初に戻るループを有効にする
    slidesPerView: "auto", // 表示するスライドの数を自動で調整
    spaceBetween: 10, // スライド間のスペースを10pxに設定
    speed: 3000, // スライドの移動速度を3000ミリ秒（3秒）に設定
    autoplay: {
      delay: 0, // 自動再生の遅延を0ミリ秒に設定（すぐに次のスライドに移動）
      disableOnInteraction: false, // ユーザーがスライドを操作しても自動再生を停止しない
    },
    breakpoints:{
        // 画面幅600px以上の時
        900:{
          spaceBetween: 20,
        },
    }
});

バージョンによって不具合がおきることがあるらしい。
今回は11で実装。
上記のjsによって、
loop: true,　　　　　　　無限ループ
slidesPerView: "auto "　　幅いっぱいに画像を表示しスライドさせる。
spaceBetween: 10　　　　スライドの幅はspは１０ｐｘ
breakpoints:{ 900:{ spaceBetween: 20, },　pcは２０ｐｘ
autoplayの記述によって自動再生される（この記述がないと手動）
delay: 0,　　　切り替えの時間を０にすることですぐに次のスライドになる
disableOnInteraction: false,　自動再生は操作しても止まらない

画像の大きさはSCSSで指定。

/* スライドの動き等速 */

.swiper-wrapper {
  transition-timing-function: linear;
}
/* 画像のサイズ調整 */

.swiper-slide {
  width: 100px;
  height: 100px;
 
  
  @include mq("lg") {
    width: 200px;
    height: 200px;
  }
}

.swiper-wrapper { transition-timing-function: linear; }
スライドのアニメーションが滑らかに見えるようにするためのもの。linear は、アニメーションの進行が均一であることを意味する。