Laravel,Swiper

多機能・レスポンシブ対応・スライダーが作れるjavascriptライブラリ swiperjs.com

このようなスライダーを作成する

セットアップ

resources/js/swiper.jsを作成しjsを記入していく
app.jsは全ページで読み込まれるので、Swiper.jsとして個別で読み込む事で app.jsを軽くしつつ他ページ表示も遅くならない
中身は公式からコピペ

 // import Swiper JS
 import Swiper from 'swiper';
 // import Swiper styles
 import 'swiper/swiper-bundle.css';

// core version + navigation, pagination modules:
import SwiperCore, { Navigation, Pagination } from 'swiper/core';

// configure Swiper to use modules
SwiperCore.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  // direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

swiper.cssを作成し、app.cssでimportする。

.swiper-container {
  width: 600px;
  height: 300px;
}
@import 'micromodal';
@import 'swiper';
@tailwind base;
@tailwind components;
@tailwind utilities;
Laravel Mixに読み込ませる
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/swiper.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

ここまで設定したら、コンパイルする
npm run dev
public/jsにswiper.jsができている。

view側で読み込む

htmlの雛形は公式からコピペ
Getting Started With Swiper

{{-- sliderの読み込み --}}
  <script src="{{ mix('js/swiper.js') }}"> </script>