ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
Swiperでカルーセルを実装しよう
Swiperでカルーセルを実装する方法について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
HTML入門 基本タグ編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 基本スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 セレクター編
(全21回)
PREMIUM
PREMIUM
0%
CSS入門 フレックスボックス編
(全22回)
PREMIUM
PREMIUM
0%
CSS入門 アニメーション編
(全19回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(13)
#01 macOSで学習環境を整えよう
(02:28)
無料公開中
カルーセルの説明と「Swiper」の紹介
素材ファイルをダウンロードする
macOS向けにプロジェクトフォルダを設定する
未完了
#02 Windowsで学習環境を整えよう
(01:29)
無料公開中
素材ファイルをダウンロードする
Windows向けにプロジェクトフォルダを設定する
未完了
#03 ファイルを確認していこう
(02:25)
無料公開中
素材ファイルの中身を確認
ブラウザで表示する
未完了
#04 HTMLの構造を確認しよう
(02:03)
Swiperのルールに従ってdivを配置する
画像を1枚表示する
未完了
#05 さらに画像を配置していこう
(02:44)
画像を3枚配置する
画像がすべて表示されない理由
画像の位置・大きさ変更(object-fit: cover)
未完了
#06 JavaScriptのコードを書いていこう
(01:44)
main.jsにSwiperを動作させるコードを記述する
ドラッグして画像を切り替える
未完了
#07 オブジェクトの記法を理解しよう
(01:39)
JavaScriptのオブジェクト記法を図で確認する( {key: value} )
未完了
#08 オプションを指定してみよう
(02:19)
全体がループするように設定する(loop: true)
ドラッグできることがわかりやすいカーソルにする(grabCursor: true)
未完了
#09 左右に矢印を配置してみよう
(01:34)
画像の左右に矢印を配置する
未完了
#10 矢印を動作させてみよう
(02:23)
矢印をクリックして前後の画像に移動する(navigation)
未完了
#11 ページネーションを配置しよう
(02:15)
何枚中の何枚目かがわかる「ドット(ページネーション)」を表示する(pagination)
未完了
#12 ページネーションをカスタマイズしよう
(01:38)
「ドット」から指定のページにジャンプする(clickable: true)
1/3、2/3、...といった表示にする(type: 'fraction')
オプションをつけたときの注意点
未完了
#13 スクロールバーを配置しよう
(02:21)
「スクロールバー」を表示する(scrollbar)
未完了
次におすすめのレッスン
Swiperでカルーセルを実装しよう 実践編
(全19回)
PREMIUM
PREMIUM
0%
リリース情報(note)
『Swiperでカルーセルを実装しよう』をリリースしました
詳細情報
最終更新日
2024年7月23日
バージョン情報
Swiper 11