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>