Laravel11でswiper.jsライブラリーを導入する

swiper.jsは豊富なスライダー機能を提供してくれるライブラリーです。

ここでは導入方法を記載していきます。

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

インストール

$ npm install swiper

swiper.js、swiper.cssを作成

resources/js/swiper.jsを作成して

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

// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

// init Swiper:
const swiper = new Swiper('.swiper', {
    // configure Swiper to use modules
    modules: [Navigation, Pagination],

    // 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',
    },
});

resources/css/swiper.cssを作成して

.swiper {
  width: 600px;
  height: 300px;
}

vite.config.jsに設定を追加

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/swiper.css',
                'resources/js/swiper.js',
            ],
            refresh: true,
        }),
    ],
});

設定が終わったらビルド

npm run build

swiperを使いたいbladeファイルで読み込む

@vite(['resources/css/swiper.css', 'resources/js/swiper.js'])