スライダーを実装するJavaScriptプラグイン「Swiper」の基本的な使い方を徹底解説
HTML-код
- Опубликовано: 21 окт 2024
- ホームページ制作をする際に、画像をスライド表示させることはよくあると思います。
その際にJavaScriptプラグインを使うことが一般的ですが、その中でも有名なプラグインがSwiperです。簡単に高機能スライダーを実装できますのでぜひ使ってみてください！
＝＝＝ 動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・JavaScriptコース
unazuki.online...
・WordPressコンプリートコース
unazuki.online...
・HTML & CSSコース
unazuki.online...
＝＝＝ SNS
■ Twitter： / life_toshindai
＝＝＝ 経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化
-------------------- 簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
RUclipsでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
わかりやすい動画をありがとうございます。
スライダー、かっこいいです！
やっていてとても楽しかったです。
ありがとうございます！
色々できると楽しくなりますよね！
夜 ゆっくり動画と共に勉強したいと思います。
とても為になります。
これからも動画 楽しみにしてます。
vol.3まで出すので楽しみにしてください！
ありがとうございます！
めっちゃわかりやすかった！
分かりやすい動画ありがとうございます。
公式サイトの見方の解説もあり、大変ありがたかったです。
ありがとうございます！
公式サイト見れるようになると便利ですよね！
いつもわかりやすい動画をありがとうございます！
最初慣れないうちはこちらの動画を見て導入したいと思います😀
次の動画楽しみにしてます🤩
ありがとうございます！
ぜひ使ってみてください！
非常に分かりやすい内容でした！
勉強になりました！非常に分かりやすかったです！
今まさに勉強したいswiper！勉強させて頂きます！
タイミング良かったみたいで何よりです！
画像を入れる際にsrcsetというのを初めて見たのですが、こちらの説明をお願いいたします。
自分用：
10:23 parameter（どんな動きをつけるか）
14:00 effect
自分でcssで作った矢印をナビゲーション代わりに使うには、作ったクラス名をnavの中に入れればいいんですか？
swiper使ってますが、複数画面を表示した場合に端っこの画面が見切れないようにする、などのカスタマイズが全然できないw
パラメータとcssのどちらで設定すればいいのか・・・初級者には使いこなすのは中々大変です。
動画ありがとうございます、！
ワードプレスのサイトで使う際に注意点はありますか？
いえ、特に問題なくそのまま使えますよ！
main.jsとstyle.css別々のシートを作成した場合、swiperが動きませんでした😭