初心者におすすめ!「jQueryでスライドショー」 - WEBデザイン・プログラミング全般 - 専門家プロファイル

アイナパル 代表取締役
東京都
ITコンサルタント

注目の専門家コラムランキングRSS

対象:WEBデザイン・プログラミング

伊藤 章裕
伊藤 章裕
(システムエンジニア)
伊藤 章裕
伊藤 章裕
(システムエンジニア)
中島 俊治
中島 俊治
(パソコン講師)
伊藤 章裕
(システムエンジニア)

閲覧数順 2016年12月06日更新

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

初心者におすすめ!「jQueryでスライドショー」

- good

  1. スキル・資格
  2. WEBデザイン・プログラミング
  3. WEBデザイン・プログラミング全般

jQueryプラグインにはたくさんのスライダー系プラグインがあります。
私のお気に入りは、「bxslider」です。

一通りの動きがカバーできるため、一度利用すると色々と応用をしたくなります。

基本的にはよくあるjQueryプラグインと同じです。
まずは下記サイトからファイルをダウンロードします。

bxSlider - 右上の「Download」からダウンロードします。
jQuery - jquery.jsをダウンロードします。

bxSliderのダウンロードしたZIPファイルを解凍した中に含まれている、
jquery.bxSlider.jsと、jquery.jsをサーバーへ。

<hear>から</head>の間にまず下記を書き込みます。
<script type="text/javascript" src="jquery-1.×.×.js"></script>
<script type="text/javascript" src="jquery.bxSlider.js"></script>

続いて同じように<head>内に動作を指示させます。
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider').bxSlider({
        auto: true,  //自動再生
        pause:  5000, //静止時間
        speed: 1000, //エフェクトのスピード
        mode: 'horizontal', //エフェクトの種類
        pager:true, //ページャーの有無
        prevText: '<', //前へのテキスト
        nextText: '>' //次へのテキスト
        });
  });
</script>


あとはスライドさせたい写真や要素を<body>内に記載します。

<ul class="slider">
 <li><img src="images/image01.jpg"></li>
 <li><img src="images/image02.jpg"></li>
 <li><img src="images/image03.jpg"></li>
 <li><img src="images/image04.jpg"></li>
</ul>

以上で簡単に設定ができます。
<ul>でくくりましたが、<div>でも平気です。

もちろん、ページ表示や、矢印などスタイルシートでレイアウトを整えることが望ましいですね。

ちなみに、「bxSlider」からダウンロードした中のファイルにjquery.easing.1.3.jsというファイルもありますが
スライドのモーションなどを変更したい時に利用するので簡単に導入したい方は特に必要ありません。
慣れてきて特に凝ったサイトに利用したいなどには有効に活用できます。

bxslider」のサイトからデモもご覧いただけます。
説明がいらないぐらい、実装が簡単ですよ。

簡単・高性能な「bxslider」を是非利用してみてください。

ちなみにサンプルはこちらです。

 

 |  コラム一覧 | 

カテゴリ このコラムの執筆専門家

(東京都 / ITコンサルタント)
アイナパル 代表取締役

魅せるホームページ、オンリーワンのWebデザイン

WordPress(ワードプレス)を利用したホームページ制作、WordPress(ワードプレス)のテーマのカスタマイズ、アメブロテンプレートカスタマイズ、Facebookページ制作・運用代行はアイナパルにお任せください。

カテゴリ このコラムに関連するサービス

その他サービス フェイスブックページ作成します。

企業・団体様のフェイスブックページの初期設定をお手伝いします。

料金
28,572円

フェイスブックページは個人のページと異なります。プロフィール写真(ロゴ)やカバー写真など設定から基本情報入力まで、お客様の「面倒」「手間」を当社が担当させていただきます。

フェイスブックページ作成します。

このコラムに類似したコラム

widthの発音 中島 俊治 - パソコン講師(2013/07/28 22:16)

HTML5は花火を描けます 中島 俊治 - パソコン講師(2013/07/27 21:57)

HTML5は図形を描くことができます 中島 俊治 - パソコン講師(2013/07/26 17:28)

フェイスブックは、スマホ用カバー写真で差をつけろ! 小菅 太郎 - ITコンサルタント(2012/11/26 15:13)