👻
AstroでSwiperを使用する
はじめに
Astro 環境 で Swiper を使用する際に、毎回詰まってしまうので実装方法を備忘録として残す。
※TypeScript は使用せず、Vanilla JS での実装
👇 検証用のリポジトリ
環境
- Astro: 4.3.2
- Swiper: 11.0.6
実装方法
Swiper のインストール
bun i swiper
カルーセルコンポーネントの実装
カルーセルコンポーネントを実装する。
デフォルトのページネーション、ナビゲーションボタン、スクロールバーを入れているので、不要な場合は削除する。
src/components/Carousel.astro
---
import { Image } from 'astro:assets'
import slide01 from '/public/ged038.jpg'
import slide02 from '/public/ged039.jpg'
import slide03 from '/public/ged040.jpg'
import slide04 from '/public/ged041.jpg'
import slide05 from '/public/ged042.jpg'
import slide06 from '/public/ged043.jpg'
import slide07 from '/public/ged044.jpg'
import slide08 from '/public/ged045.jpg'
import slide09 from '/public/ged046.jpg'
import slide10 from '/public/ged047.jpg'
import slide11 from '/public/ged048.jpg'
import slide12 from '/public/ged049.jpg'
import slide13 from '/public/ged050.jpg'
---
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><Image src={slide01} alt="" /></div>
<div class="swiper-slide"><Image src={slide02} alt="" /></div>
<div class="swiper-slide"><Image src={slide03} alt="" /></div>
<div class="swiper-slide"><Image src={slide04} alt="" /></div>
<div class="swiper-slide"><Image src={slide05} alt="" /></div>
<div class="swiper-slide"><Image src={slide06} alt="" /></div>
<div class="swiper-slide"><Image src={slide07} alt="" /></div>
<div class="swiper-slide"><Image src={slide08} alt="" /></div>
<div class="swiper-slide"><Image src={slide09} alt="" /></div>
<div class="swiper-slide"><Image src={slide10} alt="" /></div>
<div class="swiper-slide"><Image src={slide11} alt="" /></div>
<div class="swiper-slide"><Image src={slide12} alt="" /></div>
<div class="swiper-slide"><Image src={slide13} alt="" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button swiper-button-prev"></div>
<div class="swiper-button swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<style>
.swiper-wrapper {
max-width: 800px;
max-height: 500px;
}
.swiper-slide img {
height: auto;
max-width: 100%;
object-fit: cover;
}
.swiper-button::after {
font-size: 32px;
color: rgb(215, 119, 22);
}
</style>
<script>
import Swiper from 'swiper'
import { Navigation, Pagination } from 'swiper/modules'
import 'swiper/css/bundle'
export const swiperConfig = {
modules: [Navigation, Pagination],
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
}
const swiper = new Swiper('.swiper', swiperConfig)
</script>
※画像をコンポーネント化する場合
次のようにコンポーネントを作成してCarousel.astroに入れる。
src/components/CarouselImages.astro
---
import { Image } from 'astro:assets'
const slideImages = [
'/public/ged038.jpg',
'/public/ged039.jpg',
'/public/ged040.jpg',
'/public/ged041.jpg',
'/public/ged042.jpg',
'/public/ged043.jpg',
'/public/ged044.jpg',
'/public/ged045.jpg',
'/public/ged046.jpg',
'/public/ged047.jpg',
'/public/ged048.jpg',
'/public/ged049.jpg',
'/public/ged050.jpg'
]
---
<div className="swiper-wrapper">
{slideImages.map((slide, index) => (
<div className="swiper-slide" key="{index}">
<image src="{slide}" alt="" />
</div>
))}
</div>
表示したいページにカルーセルを設置
最後に表示したいページに<Carousel />を設置すれば完了。
src/pages/index.astro
---
import Carousel from '../components/Carousel.astro'
import Layout from '../layouts/Layout.astro'
---
<Layout title="Welcome to Astro.">
<main>
<Carousel />
</main>
</Layout>
<style>
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: auto;
padding: 1rem;
color: white;
font-size: 20px;
line-height: 1.6;
}
</style>
Discussion