jQuery

画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!


皆さんこんにちは、mayukouです。
先日、スライダーに便利で簡単なスクリプトを見つけました。
最近は、1カラムのランディングページが主流になって来ましたが、そんなデザインにもふさわしい、コンテンツスライダーです。
画像だけスライドするプラグインは、たくさん出ていますが、
文字やボタンなどのHTMLタグもスライドできるという素敵なプラグインです。
それでは使い方をお伝えしていきます。

スポンサードリンク

デモをご紹介

デモはこちら。デモでは、わかりやすいようにコンテンツの背景色を分けています。
デモ

使い方(記述方法)


Swiper.jsの公式サイトから、ファイルを一式ダウンロードします。Githubのページに飛びますので、一番新しいZipファイルをダウンロードしましょう。Source Codeと書かれたリンクをクリックします。

公式サイトからダウンロード

スクリプトとCSSを読み込み

<head>内と<body>の閉じタグ直前に以下のCSSとスクリプトを読み込む記述をします。このとき、記述するパスは自身のパスとリンクさせてください。

HTMLの記述

CSSの記述

CSSでスライダーのサイズを設定してください。

スクリプトの記述

body閉じタグの直下に以下を記述してください。こちらは、色々なスライダーの設定になります。

こちらの記述は、左右に矢印が付く、シンプルなスライダーになります。

最後に

いかがでしたか?とても便利なので、ぜひ、ご活用ください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  2. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  3. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  4. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  5. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  6. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Mac

    仕事のBGMに!Apple Music始めてみました。使用感をご紹介
  2. iPhone

    生活が変わるかも!iphone7 に変えてみて思ったこと
  3. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
  4. グッズ

    軽くて良いかも!DELFONICSの2015年の手帳買いました!
  5. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
PAGE TOP