皆さんこんにちは、mayukouです。
先日、スライダーに便利で簡単なスクリプトを見つけました。
最近は、1カラムのランディングページが主流になって来ましたが、そんなデザインにもふさわしい、コンテンツスライダーです。
画像だけスライドするプラグインは、たくさん出ていますが、
文字やボタンなどのHTMLタグもスライドできるという素敵なプラグインです。
それでは使い方をお伝えしていきます。
スポンサードリンク
デモをご紹介
デモはこちら。デモでは、わかりやすいようにコンテンツの背景色を分けています。
デモ
使い方(記述方法)
Swiper.jsの公式サイトから、ファイルを一式ダウンロードします。Githubのページに飛びますので、一番新しいZipファイルをダウンロードしましょう。Source Codeと書かれたリンクをクリックします。
公式サイトからダウンロード
スクリプトとCSSを読み込み
<head>内と<body>の閉じタグ直前に以下のCSSとスクリプトを読み込む記述をします。このとき、記述するパスは自身のパスとリンクさせてください。
1 2 3 4 5 6 7 8 |
<head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> |
HTMLの記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- Slider main container --> <div class="swiper-container"> <!-- スライダー全体を包む --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- ページネーションが必要な場合以下を記述 --> <div class="swiper-pagination"></div> <!-- ページネーションここまで --> <!-- ナビゲーションボタンが必要な場合以下を記述 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- ナビゲーションボタンここまで --> <!-- スクロールバーが必要な場合以下を記述 --> <div class="swiper-scrollbar"></div> <!-- スクロールバーここまで --> </div> |
CSSの記述
CSSでスライダーのサイズを設定してください。
1 2 3 4 |
.swiper-container { width: 600px; height: 300px; } |
スクリプトの記述
body閉じタグの直下に以下を記述してください。こちらは、色々なスライダーの設定になります。
1 2 3 4 5 6 7 8 9 |
<script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, }); </script> |
こちらの記述は、左右に矢印が付く、シンプルなスライダーになります。
最後に
いかがでしたか?とても便利なので、ぜひ、ご活用ください。
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。