スワイパー・Swiper.js完全ガイド：Webスライダーの実装から応用まで
Webサイトに動きと洗練された印象を与え、ユーザーの視線を引きつけるWebスライダー。この記事では、Web制作初心者の方にも分かりやすく、Swiper.jsを使ったWebスライダーの実装方法を徹底解説します。基本から応用、レスポンシブデザインへの対応、ReactやVue.jsなどのフレームワークとの連携まで、あなたのWebサイトをワンランク上のものにするための情報がここにあります。
Swiper.jsとは？その魅力と基本概念
Webサイトに動きと洗練された印象を与え、ユーザーの視線を引きつけるWebスライダーは、現代のWebデザインにおいて不可欠な要素となっています。特に、情報を効果的に伝え、ユーザーエンゲージメントを高める上でその役割は大きいと言えます。この記事では、Web制作初心者の方でも理解しやすいように、高機能かつ柔軟なJavaScriptライブラリであるSwiper.jsを用いたWebスライダーの実装方法を詳しく解説します。Swiper.jsは、シンプルながらもパワフルで、モバイルフレンドリーなスライダーを短時間で実現できるため、UI/UXの向上に大きく貢献します。
Swiper.jsの概要と特徴
Swiper.jsは、タッチ操作に最適化された、モダンなWebサイトやアプリケーションで利用されるスライダー・カルーセルを簡単に作成するためのJavaScriptライブラリです。その最大の特徴は、高いパフォーマンスと豊富なカスタマイズ性、そしてブラウザ間の互換性にあります。PCはもちろん、スマートフォンやタブレットといった多様なデバイスにおいても、直感的でスムーズな操作感を提供します。スライドの切り替えアニメーション、無限ループ、ページネーション、ナビゲーションボタンなど、スライダーに必要な機能が一通り揃っており、開発者はこれらの機能を組み合わせることで、洗練されたインタラクティブなUIを効率的に構築できます。また、軽量でありながらも拡張性が高いため、複雑な要件にも柔軟に対応可能です。
Swiper.jsを使うメリット
Swiper.jsをWebサイトに導入することで、開発者とユーザー双方に多くのメリットがあります。以下にその主な利点を挙げます。
- ユーザーエクスペリエンス（UX）の劇的な向上:
直感的でスムーズなタッチ操作、視覚的に魅力的なスライド遷移アニメーションにより、ユーザーはコンテンツをより楽しく、快適に閲覧できます。これにより、サイト滞在時間の延長やコンバージョン率の向上が期待できます。 - デザインの柔軟性と表現力の拡大:
スライダーの見た目や挙動は、CSS変数やJavaScriptオプションを通じて細かくカスタマイズ可能です。ブランドイメージに合わせたデザインや、ユニークなアニメーション効果を容易に実装でき、サイト全体のデザイン性を高めます。 - 開発効率の大幅な向上:
Swiper.jsは、スライダー構築に必要な基本的な機能を網羅しているため、ゼロから実装する手間を省けます。豊富なドキュメントと活発なコミュニティサポートにより、初心者でも迅速に実装を進めることができ、開発リソースを他の重要な部分に集中させることが可能です。 - レスポンシブ対応とパフォーマンス:
モバイルファースト設計がされており、あらゆるデバイスサイズに自動で最適化されます。また、パフォーマンスチューニングも行われており、軽快な動作でユーザー体験を損ないません。 - アクセシビリティへの配慮:
キーボード操作やスクリーンリーダーなど、アクセシビリティ標準への対応も考慮されており、より多くのユーザーが快適に利用できるWebサイト構築に貢献します。
Swiper.jsの導入方法
Swiper.jsをWebプロジェクトに組み込む方法はいくつかありますが、ここでは主にCDNとnpm/yarnの2つのアプローチに焦点を当てて解説します。それぞれの方法には利点があり、プロジェクトの規模や開発環境に応じて最適な選択肢が変わってきます。
CDNからの読み込み方法
最も手軽にSwiper.jsを試したい場合や、小規模なプロジェクトでは、CDN（Content Delivery Network）からの読み込みが便利です。この方法では、HTMLファイルの<head>セクションや<body>の末尾に、Swiper.jsのCSSファイルとJavaScriptファイルを指定したCDNのURLを持つ<link>タグおよび<script>タグを追加するだけで導入が完了します。外部サーバーから直接リソースを取得するため、ローカル環境へのインストール作業は不要です。
npmからのインストール方法
Node.js環境で開発を行っている場合や、Webpack、Viteなどのモジュールバンドラーを使用しているプロジェクトでは、npm（Node Package Manager）またはyarnといったパッケージマネージャーを利用してSwiper.jsをインストールするのが一般的です。この方法では、コマンドラインから npm install swiper または yarn add swiper を実行してライブラリをプロジェクトに組み込みます。これにより、コード内でSwiper.jsをモジュールとしてインポートして利用できるようになり、依存関係の管理やビルドプロセスとの連携が容易になります。大規模なアプリケーション開発や、React、Vue.jsなどのフレームワークと組み合わせて使用する場合に特に推奨されるアプローチです。
基本的なスライダーの実装方法
Swiper.jsは、Webサイトやアプリケーションでリッチなスライダーやカルーセルを簡単に実装できるJavaScriptライブラリです。本セクションでは、Swiper.jsを使ったスライダーの基本的な実装方法を、HTML構造の定義からCSSによるスタイリング、そしてJavaScriptでの初期化まで、ステップバイステップで解説します。初心者の方でも迷うことなく、すぐに実践できるような具体的なコード例を交えながら進めていきます。
HTML構造の解説
Swiperスライダーを機能させるためには、特定のHTML構造が必要です。この構造は、スライダー全体を囲むコンテナ要素、スライドが格納されるラッパー要素、そして個々のスライド要素で構成されます。最も基本的な構造は以下のようになります。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 必要に応じてナビゲーションやページネーションの要素を追加 -->
</div>
swiper-containerクラスはスライダー全体の領域を定義し、その中にswiper-wrapperクラスを持つ要素を配置します。swiper-wrapperは、スライドを横並びに配置する役割を担います。そして、個々のスライドコンテンツはswiper-slideクラスを持つ要素で囲みます。これらのクラス名はSwiper.jsが内部で利用するため、指定が必須となります。スライドの数だけswiper-slide要素を配置してください。
CSSスタイルの設定
HTML構造を定義したら、次にスライダーの見た目を整えるためのCSSを設定します。Swiper.js自体には基本的なスタイルが用意されていますが、デザインに合わせてカスタマイズすることが一般的です。スライダー全体の幅や高さを指定したり、スライド間の余白を調整したりします。
.swiper-container {
width: 100%; /* スライダーの幅 */
height: 300px; /* スライダーの高さ */
margin: 20px 0; /* 上下の余白 */
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* スライドの境界線 */
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 画像のアスペクト比を保ちつつフィットさせる */
}
上記の例では、スライダーコンテナに幅と高さを指定し、スライドには背景色や中央揃えのスタイルを適用しています。object-fit: cover;は、画像がスライドのサイズに合うように調整する際に便利です。必要に応じて、ナビゲーションボタンやページネーションのスタイルもここで定義します。
JavaScriptでの初期化
HTMLとCSSでスライダーの骨格と見た目を準備したら、いよいよJavaScriptを使ってSwiperを初期化し、スライドを動かせるようにします。Swiper.jsライブラリを読み込んだ後、JavaScriptコードでSwiperクラスのインスタンスを生成します。
var mySwiper = new Swiper('.swiper-container', {
// オプションを設定
slidesPerView: 1, // 一度に表示するスライド数
spaceBetween: 30, // スライド間の余白 (px)
loop: true, // ループ再生
pagination: {
el: '.swiper-pagination', // ページネーション要素のセレクタ
clickable: true, // ページネーションをクリック可能にする
},
navigation: {
nextEl: '.swiper-button-next', // 次へボタン要素のセレクタ
prevEl: '.swiper-button-prev', // 前へボタン要素のセレクタ
},
});
new Swiper('.swiper-container', { ... })のように、スライダーコンテナのセレクタを第一引数に、オプションオブジェクトを第二引数に渡します。slidesPerViewで一度に表示するスライド数、spaceBetweenでスライド間の距離、loopで無限ループ再生を設定できます。さらに、paginationやnavigationオプションを設定することで、ページネーションや前後スライドへの移動ボタンを追加できます。これらのオプションを調整することで、スライダーの挙動を細かく制御できます。
Swiper.jsの設定オプション：カスタマイズ自由自在
Swiper.jsは、その高い柔軟性と豊富な設定オプションにより、あらゆるニーズに対応するスライダーを実装できる強力なJavaScriptライブラリです。ここでは、Swiper.jsを最大限に活用するための主要な設定オプションについて、基本的なものから応用的なものまで、その役割と使い方を解説していきます。
基本的な設定オプション
スライダーの見た目や基本的な動作を制御する、頻繁に使用されるオプション群です。これらを適切に設定することで、ユーザーにとって使いやすいスライダーの基盤を構築できます。
slidesPerView:
一度に表示するスライドの数を指定します。autoやブレークポイントごとの設定も可能です。spaceBetween:
スライド間のピクセル単位の間隔を指定します。navigation:
前後のスライドへ移動するための矢印ナビゲーションを表示・設定します。pagination:
スライドの現在位置や全体数を示すページネーション（ドットやインジケーター）を表示・設定します。
高度な設定オプション
よりインタラクティブでリッチなユーザー体験を提供するための、高度な機能を実現するオプション群です。これらのオプションを組み合わせることで、デザインの幅が大きく広がります。
autoplay:
スライドの自動再生を設定します。再生間隔や停止条件なども細かく制御できます。loop:スライダーの末尾から先頭へ、またはその逆へシームレスにループさせる無限スクロール機能を有効にします。effect:
スライドの切り替え時に適用されるトランジションエフェクトを指定します。slide（デフォルト）、fade、cube、coverflow、flipなど、多様なエフェクトが用意されています。keyboard:
キーボードの左右矢印キーによるスライド操作を有効にします。これにより、アクセシビリティと操作性が向上します。
レスポンシブデザイン対応：デバイスごとの最適化
ウェブサイトやアプリケーションにおいて、スライダーはユーザーエクスペリエンスを向上させるための強力なUIコンポーネントですが、その表示はデバイスの画面サイズに大きく依存します。デスクトップ、タブレット、スマートフォンのような異なる画面幅を持つデバイスで、スライダーが常に最適に表示されるようにすることは、レスポンシブデザインの重要な課題です。本セクションでは、Swiper.jsのようなライブラリを活用し、デバイスごとに異なる表示設定を適用する「ブレークポイント」機能を中心に、スライダーを効果的にレスポンシブ対応させる方法を解説します。
ブレークポイントの設定方法
Swiper.jsをはじめとする多くのスライダーライブラリでは、「ブレークポイント」という機能が提供されており、これにより画面幅に応じてスライダーの各種設定を動的に変更できます。この機能は、CSSのメディアクエリが画面幅に応じてスタイルを適用するのと同様に、JavaScriptでスライダーの挙動を制御する際に非常に役立ちます。例えば、デスクトップでは一度に多くのスライドを表示し、タブレットでは数を減らし、スマートフォンではさらに少なく表示するといった調整が可能です。slidesPerView（一度に表示するスライド数）やspaceBetween（スライド間の間隔）といった主要なパラメータを、特定の画面幅を境に切り替えるように設定することで、あらゆるデバイスで最適なスライダー表示を実現します。具体的には、Swiperの初期化オプションにbreakpointsオブジェクトを渡すことで、この設定を行います。このオブジェクト内で、キーとしてブレークポイントとなる画面幅（例: 768 は768px以下）、値としてその画面幅以下で適用したいスライダーの設定オブジェクトを指定します。
スライダーのサイズ調整
スライダーのレスポンシブ対応では、スライド内容の表示数だけでなく、スライダーコンテナ自体のサイズ調整も不可欠です。CSSを使用すると、width: 100%; や max-width を設定することで、スライダーが親要素の幅に追従するようにできます。しかし、スライドの内容（画像やテキスト）の高さが一定でない場合、スライダー全体の高さも変動し、レイアウトが崩れることがあります。このような問題に対処するには、JavaScriptを用いてスライドの高さを検知し、スライダーコンテナの高さを動的に調整する方法が有効です。例えば、Swiper.jsではautoHeight: trueオプションを有効にすることで、現在の表示スライドに合わせてスライダーの高さを自動調整させることができます。また、CSSのaspect-ratioプロパティを利用して、画像のスライドに固定のアスペクト比を持たせることも、高さの安定化に寄与します。これらの手法を組み合わせることで、あらゆるデバイスでスライダーが意図した通りのサイズとレイアウトで表示されるようになります。
フレームワークとの連携
モダンなJavaScriptフレームワークであるReactやVue.jsは、コンポーネントベースの開発を可能にし、UI構築を効率化します。これらのフレームワーク上で、高機能なスライダーライブラリであるSwiper.jsを効果的に連携させることで、インタラクティブで魅力的なカルーセルやスライドショーを容易に実装できます。本セクションでは、各フレームワークに特化したSwiper.jsの導入方法と、具体的な実装パターンについて解説します。
ReactでのSwiper.js実装例
React環境でSwiper.jsを利用するには、公式のSwiper Reactコンポーネント (swiper/react) を使用するのが最も一般的で推奨される方法です。これにより、Reactのコンポーネントモデルにシームレスに統合され、JSX内でSwiperインスタンスを宣言的に扱えるようになります。
まず、必要なパッケージをインストールします。
npm install swiper
# または
yarn add swiper
次に、Reactコンポーネント内でSwiperとSwiperSlideコンポーネントをインポートし、通常のReactコンポーネントのように記述します。SwiperのオプションはSwiperコンポーネントのpropsとして渡します。
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css'; // Core Swiper CSS
import 'swiper/css/navigation'; // Navigation module CSS
import 'swiper/css/pagination'; // Pagination module CSS
// import required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
function MySwiperComponent() {
return (
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y]}
spaceBetween={50}
slidesPerView={1}
navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
);
}
export default MySwiperComponent;
このアプローチでは、SwiperのDOM操作がReactの管理外で行われることを心配する必要がなく、Reactのライフサイクルやstate管理と連携させやすくなります。もし、より複雑なカスタマイズや、SwiperのAPIを直接操作したい場合は、useEffectフック内でSwiperインスタンスを生成・操作する方法も考えられますが、通常は公式コンポーネントで十分な機能が提供されています。
Vue.jsでのSwiper.js実装例
Vue.jsプロジェクトでSwiper.jsを活用する場合も、公式のVueコンポーネント (swiper/vue) を利用するのが最も効率的です。これにより、Vueのテンプレート構文内でSwiperを宣言的に記述でき、Vueのリアクティブシステムとの親和性も高まります。
まず、Swiper本体とVue用コンポーネントをインストールします。
npm install swiper
# または
yarn add swiper
次に、Vueコンポーネントの<script>セクションでSwiperとSwiperSlideコンポーネントをインポートし、setup関数内またはcomponentsオプションで登録します。SwiperのオプションはSwiperコンポーネントのpropsとして渡します。
<template>
<swiper
:modules="[Navigation, Pagination, Scrollbar, A11y]"
:slides-per-view="1"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
</swiper>
</template>
<script setup>
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { Swiper, SwiperSlide } from 'swiper/vue';
// import required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
</script>
Vue 3のComposition API ( <script setup> ) を使用すると、より簡潔に記述できます。Swiperのイベントは@swiperや@slideChangeといったVueのイベント構文で受け取ります。Vueのライフサイクルフック（onMountedなど）と組み合わせて、Swiperインスタンスの初期化や状態管理を行うことも可能です。
Swiper.jsを使ったWebサイト事例
Swiper.jsは、その高い柔軟性と豊富な機能により、Webサイトにおいて多様なスライダーやカルーセルを実装するための強力なツールとして広く活用されています。ここでは、実際のWebサイトでSwiper.jsがどのように活用されているかの具体的な事例を紹介し、そのデザインや機能から、皆さまのプロジェクトへのインスピレーションを刺激することを目指します。
事例紹介：様々なタイプのスライダー
Webサイトのデザインや目的に応じて、Swiper.jsは様々なタイプのスライダーとして実装されています。ここでは、代表的なユースケースとその特徴を見ていきましょう。
まず、サイトの第一印象を決定づける「ヒーローセクション」では、フルスクリーンで表示されるイメージスライダーがよく用いられます。これは、ブランドの世界観をダイナミックに伝えたり、最新のキャンペーン情報を印象的に表示したりするのに効果的です。自動再生機能や、滑らかなトランジションエフェクト（フェードイン・フェードアウト、スライドなど）が、ユーザーの視線を引きつけ、没入感を高めます。
次に、ECサイトなどで頻繁に見られるのが「商品紹介カルーセル」です。限られたスペースに複数の商品を効率的に表示でき、レスポンシブデザインに対応させることで、PC、タブレット、スマートフォンなど、あらゆるデバイスで最適な表示を実現します。左右のナビゲーション矢印やドット（ページネーション）による直感的な操作性、そして無限ループ機能は、ユーザーがストレスなく商品を閲覧し続けるための重要な要素となります。
また、ブログ記事の抜粋やポートフォリオの作品集などを、視覚的に魅力的な「コンテンツフィード」として表示する際にもSwiper.jsは活躍します。カード形式のデザインと組み合わせることで、情報を整理しつつ、スワイプ操作で次々と新しいコンテンツにアクセスできるインタラクティブな体験を提供します。
さらに、デザインの洗練さを重視する場合には、「ミニマルなサムネイルナビゲーション」との連携が有効です。メインのスライダーと連動し、各スライドに対応する小さなサムネイル画像を表示することで、ユーザーは全体像を把握しながら、目的のスライドへ素早く移動できます。これは、視覚的な情報量が多くなりがちなギャラリーサイトなどで特に効果を発揮します。
これらの事例は、Swiper.jsがいかに多様なニーズに応え、ユーザー体験を向上させるための強力なソリューションとなり得るかを示しています。
Swiper.jsに関するよくある質問とトラブルシューティング
Swiper.jsは非常に柔軟で強力なスライダーライブラリですが、開発中に予期せぬ問題に直面したり、疑問が生じたりすることがあります。このセクションでは、Swiper.jsの利用において遭遇しやすい一般的なエラーとその解決策、そして開発者が抱きがちな疑問点について、Q&A形式で分かりやすく解説します。これにより、皆さんの実装体験をよりスムーズにし、学習コストの低減に貢献することを目指します。
よくあるエラーとその解決策
開発中に最も頻繁に遭遇する問題の一つは、スライダーが期待通りに表示されないケースです。これには、CSSの競合、JavaScriptの初期化タイミングの遅延、あるいはHTML構造の誤りなどが原因として考えられます。例えば、スライダーコンテナの幅が0になっていたり、display: none が適用されていたりすると、スライダーは正しくレンダリングされません。また、タッチ操作が機能しない場合、デバイスのデフォルトのスクロール動作との競合や、Swiper.jsのイベントリスナーが正しく設定されていない可能性が疑われます。特定のオプションが意図した通りに動作しない場合は、まずSwiper.jsのドキュメントでそのオプションの正確な意味と適用範囲を確認することが重要です。多くの場合、オプションの指定方法が間違っているか、他のオプションとの組み合わせで予期せぬ動作を引き起こしていることがあります。これらの問題を解決するには、ブラウザの開発者ツール（インスペクター、コンソール）を駆使し、HTML構造、CSSプロパティ、JavaScriptのエラーメッセージを丹念にチェックすることが不可欠です。
FAQ：Swiper.jsに関する疑問を解消
Swiper.jsの利用に関する疑問は多岐にわたります。
まず、バージョン互換性についてですが、Swiper.jsはメジャーバージョンごとに破壊的な変更を含むことがあります。新しいバージョンへアップデートする際は、必ず公式ドキュメントの変更履歴（Changelog）を確認し、既存の実装に影響がないか確認することが推奨されます。パフォーマンス最適化に関しては、大量の画像を扱う場合や複雑なスライド効果を用いる場合に、スライダーの表示速度や操作感が低下することがあります。これを防ぐためには、画像の遅延読み込み（lazy loading）、軽量な画像フォーマットの利用、不要なモジュールの読み込みを避ける、CSSアニメーションの活用などが有効です。
アクセシビリティ対応は、現代のWeb開発において不可欠ですが、Swiper.jsもARIA属性の付与やキーボード操作への対応など、アクセシビリティを考慮した設計が可能です。必要に応じて、これらの機能に関するドキュメントを参照してください。
最後に、カスタマイズの限界についてですが、Swiper.jsは非常に柔軟性が高いものの、極端に複雑なレイアウトやインタラクションを実装したい場合は、ライブラリの内部構造に深く踏み込むか、あるいは別のソリューションを検討する必要が出てくることもあります。しかし、ほとんどの一般的なスライダー要件は、Swiper.jsの豊富なAPIとオプションで十分に実現可能です。
まとめ
Swiper.jsは、Webサイトに動きと洗練された印象を与える高機能なJavaScriptライブラリであり、初心者でも簡単にWebスライダーを実装できます。タッチ操作に最適化され、高いパフォーマンスと豊富なカスタマイズ性、クロスブラウザ互換性を持ち、ユーザーエクスペリエンス（UX）の向上、デザインの柔軟性、開発効率の向上に貢献します。
導入方法はCDNからの読み込みとnpm/yarnからのインストールがあり、プロジェクトの規模に応じて選択できます。基本的な実装は、HTML構造の定義、CSSによるスタイリング、JavaScriptでの初期化というステップで行われます。swiper-container、swiper-wrapper、swiper-slideといったクラス名を持つHTML要素を用意し、CSSでスライダーの見た目を整え、JavaScriptでnew Swiper()を用いて初期化します。
Swiper.jsは、slidesPerView、spaceBetween、navigation、paginationといった基本的なオプションに加え、autoplay、loop、effect（slide, fade, cubeなど）、keyboardといった高度なオプションも提供しており、これらを組み合わせることで多様なスライダーを構築できます。
レスポンシブデザイン対応は、画面幅に応じてスライダーの設定を変更できる「ブレークポイント」機能を用いることで実現します。これにより、デスクトップ、タブレット、スマートフォンなど、デバイスごとに最適な表示数や間隔を調整できます。スライダー自体のサイズ調整も、CSSやJavaScript、autoHeightオプションなどを活用して行います。
ReactやVue.jsといったフレームワークとの連携も、公式のSwiper React/Vueコンポーネントを使用することで容易になり、JSXやテンプレート構文内で宣言的にスライダーを記述できます。
実際のWebサイトでは、ヒーローセクションのフルスクリーンイメージスライダー、ECサイトの商品紹介カルーセル、ブログ記事のコンテンツフィード、サムネイルナビゲーションとの連携など、様々な形でSwiper.jsが活用されています。
よくある質問やトラブルシューティングとしては、CSSの競合やJavaScriptの初期化タイミング、オプションの誤用などが挙げられます。これらの問題は、開発者ツールを用いたデバッグや、公式ドキュメントの確認によって解決できます。また、バージョン互換性、パフォーマンス最適化、アクセシビリティ対応についても、ドキュメントを参照しながら適切に対処することが重要です。
AIミライデザイナーではスワイパーであるSwiper.jsを活用したWeb構築も問題無く出来ますので、ご相談ください。
