皆さんこんにちは、mayukouです。
先日、スライダーに便利で簡単なスクリプトを見つけました。
最近は、１カラムのランディングページが主流になって来ましたが、そんなデザインにもふさわしい、コンテンツスライダーです。
画像だけスライドするプラグインは、たくさん出ていますが、
文字やボタンなどの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デザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.01.03jQueryヒーローヘッダーに使えるスライダーjQueryプラグインSlickの使い方
- 2021.05.04wordpress【制作実績】wordpressでイラストレーターさんのポートフォリオサイトを作成いたしました
- 2019.09.29jQuery画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！
- 2019.07.27デザインお店の顔！仕事の幅も広がる私流ロゴデザインマニュアル
この記事へのコメントはありません。