この記事ではAstroでnpmを使ってswiperをインストールして使う方法をご紹介します。
npmを使うとpackage.jsonで管理できるため、プロジェクトのモジュールのバージョン管理が容易になるメリットがあります。
Swiperをインストール
まずはSwiperをインストールします。
以下のコマンドをターミナルで入力します。
npm i swiperこれだけでインストールは完了です。
Swiperに関するコードを書く
次にSwiperに関するコードを書きます。
実際に私が使用しているswiperのコンポーネントがこちらです。
Swiper.astro
---
import { Image } from "astro:assets";
import img from "../images/img.png";
---
<div class="swiper-container swiper-container1">
<div class="swiper swiper1">
<!-- swiper-wrapper 必須・名称変更不可 -->
<div class="swiper-wrapper">
<!-- swiper-slide 必須・名称変更不可 -->
<div class="swiper-slide">
<Image src={img} alt="" />
</div>
<div class="swiper-slide">
<Image src={img} alt="" />
</div>
<div class="swiper-slide">
<Image src={img} alt="" />
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
</div>
</div>
<style lang="scss">
.swiper-container {
max-width: 300px;
height: auto;
}
</style>
<script>
import Swiper from "swiper";
import "swiper/css/bundle";
import { Autoplay, Pagination } from "swiper/modules";
const swiper = new Swiper(".swiper1", {
modules: [Autoplay, Pagination],
loop: true,
speed: 1000,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination1",
clickable: true,
},
});
</script>これで完了です。お疲れ様でした！
さいごに
この記事ではこの記事ではAstroでnpmを使ってswiperをインストールして使う方法をご紹介しました。
npmを使うことで簡単にswiperを使うことができます。
是非皆さんも活用してみて下さい。
