導入の準備
まずはresources/jsにswiper.js
、resources/cssにswiper.css
を作ります。
次にapp.js
、app.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
で動作します。
参考