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. Web Design

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

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

  3. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  4. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  5. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  6. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. Illustrator

    スキャンした画像をIllustratorでベクターにする方法2 (追記)
  2. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー…
  3. マーケティング

    趣味ブログのPV(ページビュー)が1ヶ月で2倍に!私がやったSEO対策とは。
  4. ブログ

    webデザイナー4年目!その間に身につけたスキル
  5. Tutorial

    簡単!photoshopでスタンプ風のかすれた表現をする方法
PAGE TOP