0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Laravel+viteにSwiper.js(v11.2.0)を導入する

Last updated at Posted at 2025-01-08

導入の準備

まずはresources/jsにswiper.js、resources/cssにswiper.cssを作ります。
次にapp.jsapp.cssにそれぞれ@import "swiper";を記述します。

インストール

npm install swiper

swiper.jsの記述

Initializeする時にうっかりmodulesの記述を消してしまい、動作しないため原因究明のために無駄に時間を過ごしてしまったので気をつけてください。

resources/js/swiper.js
// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';

// core version + navigation, pagination modules:
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',
  },
});

swiper.cssの記述

resources/css/swiper.css
.swiper {
  width: 600px;
  height: 300px;
}

HTMLの記述

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

ここまで記述すればnpm run devで動作します。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?