jQueryプラグインbxSliderで初心者もスライダーつけてみるの回 はてなブックマーク - jQueryプラグインbxSliderで初心者もスライダーつけてみるの回

サンプルデモimages

意図や意味に沿ったデザインと、使いやすいレイアウトが大事なことは理解しています。
しかし、なんか動いてるだけで「カッコいー」と思ってしまう。そんなお手軽初心者・管理人です。すみません。

練習用サイト作りながら学習する中で、「スライダーをつけたいな、できれば難しくないプラグインを使って」と考え探してみました。

今回は図のようなサンプルデモで、使い方や基本オプションの動作を確認しながらまとめてみます(この記事はver.4.0版です。ver.3.0とは各クラス名やオプションに若干変更があるのでご注意)。基本的なCSSの調整も確認。シンプルで初心者にも設置しやすい、bxSliderについての覚え書きです。

目次

この記事は↑の図のような簡単なサンプルスライドの設置手順に沿って、コード例とざっくりとした図解で解説しています。ここではカルーセル型の設定法は扱っていません。触れている内容は以下の通り。

※css調整のページャーactiveについて、記述ミスがありましたので追記・訂正しました。
長らく誤った記述を記載してしまい申し訳ありませんでした。2015.1.17

bxSliderが最近新しくなったようです

このbxSliderは、jqueryと一緒にを読み込ませればulでもdivでもスライダーが使える上に、スライド動作も3種類選べてなおかつカルーセルタイプにもできる、だが何より特筆すべきは設置が簡単! というスライダープラグインです。事実、本気で簡単でした。当サイトでは作品解説ページに、jquery.bxslider.minを利用してスライダーをつけてます。

いまさら何を覚え書く必要があるのか。設置は簡単でした。しかし、このとき外観を整える際ちょっと苦戦しまして(生成されるスライドのdiv構造がよく分からなかったため、どのclassに対してCSS指定したらいいのか分からず普通にとまどった)、Firebugで確認しながらどうにか現行の形に(私はFirefox派です)。

……そんなこんなでメモってた使用方法(自分仕様)を、『よし、まとめよう!』と思った矢先にver.変わってました…!

どうも2012年の12月頃にver.4になったようです…(このサイトで使用したときはver.3でした)。レスポンシブ対応に伴ってか、ver.3からclass名、ページャーやprev/nextなどコントロール部分など、細かい構造が変化しているようですね。デフォルトのスタイルシートが収められている位置も変わっています。ver.4はそのまま使えば、本家サイトのデモと同じ動作が得られます(調整は必要ですが)。

というわけで、ついでにver.4の確認を兼ねてデモで動作確認しつつ覚え書きしておきます。
つまり「えっバージョン変わったんですかレスポンシブ対応ですかclass名も変わったみたいですね確認しておきます」編です。

まずはここから。bxSliderを使ってみる

bxSliderサイトから、ファイルをダウンロードします。ファイルを解凍し、中身を確認。

  • imagesフォルダ(prev/nextなどデフォルト画像が入ってる)
  • pluginsフォルダ(スライドに特殊効果・機能を付けたい場合に使う。ここのサンプル内容では不要)
  • jquery.bxslider.css(デフォルトのcss。本家サイトトップのサンプルスライドのデザインが得られる)
  • jquery.bxslider(JScriptファイル。ファイルサイズ大きい)
  • jquery.bxslider.min(JScriptファイル。改行とかインデントを省きファイルサイズ小さくしたもの)

上記のファイル・フォルダが格納されています。最低限のスライド動作なら、jquery.bxslider.minだけでOKです。

head記述

head部分にjqueryとjquery.bxslider.minを読み込ませます。
そのままbxSlider効果の指定を記述。例として”slider”というclass名にてbxSliderを付けてみます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript">
<script type="text/javascript" src="jquery.bxSlider/jquery.bxSlider.min.js">
<script type="text/javascript">
$(document).ready(function(){
  $('.slider').bxSlider();//ここで指定した'.slider'というclass名でhtmlを囲みます
});
</script>
HTML

そして、スライドさせたい要素をulで囲みます。divでも動きますが、今回はulで。
囲んだ要素にさきほどheadで指定したclass名をつけます。この場合は”slider”ですね。

<ul class="slider">
<li><img src="このへんは" /></li>
<li><img src="適宜" /></li>
<li><img src="用意する" /></li>
</ul>

これで指定のulがスライダーとして生成されます。なんと簡単。bx-Sliderのトップページのスライダーは、これにオプションを加えたり、CSSで見た目を整えたりしています。
では、『CSSで基本的な見た目を整える』ための覚え書きに進みましょう。

スライダーの構造…のようなものと、動作の確認

bx-Sliderサイトのトップに表示されているスライダー(デフォルトCSS版)の、大雑把な構造が以下の図です。あまり正確ではないですが、スライダーの構成要素は大体こんなです。

スライダー構造のおおまかな図解

雑な図解ですが、class名だけでもver.3と少しずつ変更点があるなぁ、と感じます。
これをふまえて、まずはbxSliderの動作だけを確認してみます。仮に330×290pxの小さめの画像を使用して、CSS指定なしでスライダーを付けてみるとこうなります。

スライダーの指定(script)
<script type="text/javascript">
$(document).ready(function(){
  $('.slider').bxSlider();
});
</script>
html
<ul class="slider">
<li><img src="slide-image1.jpg" width="330" height="290" alt="イメージ1" /></li>
<li><img src="slide-image2.jpg" width="330" height="290" alt="イメージ2" /></li>
<li><img src="slide-slide3.jpg" width="330" height="290" alt="イメージ3" /></li>
</ul>

サンプル

全開のスライドは、無論CSSが指定されていないから。しかし、これだけでも確実にスライド機能が動作してくれるというありがたさ。
ここからデザインや用途に合わせてCSSでレイアウト等変更していきます。
※そのままデフォルトのCSSを使えば問題ないように思いますが、使用するサイトでの統一感とか、初心者なりにいろいろあるので、スライダー機能『jquery.bxslider.min』だけを使ってあれこれしてみます。デフォルトCSSを参考に、必要なところは変更する、というのが初心者向きかと思います。

オプション・CSSでスライダーを整える

CSSをいじる前に、サンプルのスライド構造を確認しておきます。語弊もありますが、大体こんな感じかな…。

サンプル用スライドの構造(大体)

………………………………………………………ン? …という微妙な図で申し訳なく…。
図の中に書き込んである文がちょいちょい変なのはWeb語彙が弱い所為です。大体の雰囲気をつかむための図解なので、正確性に欠けてます。図解はともかく、CSSで見た目を整えるために、ブラウザ上に生成されたスライダーがどのような構造で表示されているのか、確認しておくと分かりやすいはず…。

1.まずはサイズ合わせ

使用する内容に合わせてサイズを整えます。図の中にもありますが、とりあえずdiv.bx-wrapperのwidthを指定します。このサンプル上では最低限330px分の幅が必要です(幅の内訳は問わないですが)。
1、2、3とタテに並んでいるのはページャーです(bxSliderサイトでは●で表示されているアレ)。一つずつdivで括られているため、デフォルトCSSのようにするにはdisplay:inline-block等を指定して横並びに表示させる必要があります。

prev/nextも左右に配置しなおした方が確実に使いやすいです。というわけで、div.bx-controls-directionに対してpositionを指定したり、a.bx-prevやa.bx-nextに位置指定が必要になってきます。

html

サンプルの使用画像が小さいので、バランスをとるためにスライダーを囲む枠線もつけてみます。

<div class="frameLine"><!--枠線用にdivで囲む-->
<ul class="slider">
<li><img src="中略" /></li>
<li><img src="中略" /></li>
<li><img src="中略" /></li>
</ul>
</div><!--end div.frameLine-->
CSS
.frameLine {
	border: solid 1px #CCC;
	padding: 20px;
}
.bx-wrapper {
	width: 330px;
	margin: 0 auto;
	position: relative;
}
.bx-wrapper .bx-pager {
	text-align: center;
        margin-top: 5px;
}
.bx-wrapper .bx-pager .bx-pager-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}
.bx-wrapper .bx-controls-direction a {
	position: absolute;
	z-index: 9999;
}
.bx-prev {
	left: 10px;
}
.bx-wrapper .bx-next {
	right: 10px;
}

さて、外観用のCSS指定にプラスして、スライダー機能に対してオプション指定を付け加えてみます。スライダーの動作そのものを調整できます。今回はスライダーを自動で切り替える『auto』、prev/nextを指定の文字列に変更できる『prevText』、『nextText』を指定してみます。

スライダー指定(script)
<script type="text/javascript">
$(document).ready(function(){
    $('.slider').bxSlider({
    auto: true,//自動切り替えの有無
    prevText: '前へ', //前へのテキスト
    nextText: '次へ' //次へのテキスト
    });
  });
</script>

…と、最低限整えるべきCSSとオプションを指定すると、こうなります。
サンプル【1.まずはサイズ合わせ】を参照

2.control部分を調整する

[prev]と[next]を画像に変えたり、というのも普通にCSSの画像置換(text-indent:-9999を使うアレ)でできます。デフォルトCSSでは丸ボタン画像ですが、違う画像を使用したければ(適宜用意して)background-imageに。※ver.3にあったcontrolの画像を変更する用のオプションprevImage:(url)/nextImage:(url)はなくなったようです。
ページャーのデザインは、div.bx-pager aに対して幅・高さを指定したり、textの有無(これもtext-indent)を調整することで変更できます。

CSS

サンプル2は、controlのボタン画像変更、ページャーをCSS3のborder-radius(角丸)で●に。本家デザインでも使用されている●ページャーですが、CSS3なのでIE8以前では●表示されません

.bx-pager a {
	background: #666;
	text-indent: -9999px;/*数字表示をブラウザ外に押しやる*/
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	-moz-border-radius: 5px;/*角丸指定 四隅を丸くすることで10pxの●に*/
	-webkit-border-radius: 5px;/*角丸指定*/
	border-radius: 5px;/*角丸指定*/
}
.bx-pager a:hover,
.bx-pager a.active {
	background: #000;
}
.bx-prev {
	left: 17px;
	background: url(prev-img.png) no-repeat;/*prev用画像*/
}
.bx-next {
	right: 17px;
	background: url(next-img.png) no-repeat;/*next用画像*/
}
.bx-controls-direction a {
	position: absolute;
	margin-top: -16px;
	width: 35px;/*使用画像に応じて指定*/
	height: 35px;/*使用画像に応じて指定*/
	text-indent: -9999px;/*画像置換のためテキストを押しやる*/
	z-index: 9999;
}

↑2013.6.28.擬似クラス部分の記述ミスを訂正しました。 ↑2015.1.17.クラスactive部分の記述ミスを訂正しました。

※上記CSS13行目について
bxSliderの場合、擬似クラスのa:activeでは指定できないようです。同じ擬似クラスでも、a:hoverは指定できるのですが、activeについては、スクリプト内でclass=”active”という指定がなされているようで、擬似クラスの『:(コロン)』では反映されません。2015.1.17追記

サンプル【2.control部分を変更する】を参照

3-4.mode変更する(基本的なオプションを選んでみる)

オプションの詳細はbx-Sliderサイトにまとめられているので、ここでは基本的な設定をメモるのみにとどめておきます。bx-Sliderサイトでは、もっとさまざまなオプション機能が解説されています。Exampleにてサンプルも見られますのでそちらを参考になさってください。

  • auto:…スライドの自動再生の有無。true/falseで指定。デフォルトではfalseなので自動では切り替わらない。
  • pause:…一つのスライドに対しての静止時間。ミリ秒指定。デフォルトでは4000。
  • speed:…スライド動作の速度。ミリ秒指定。デフォルトでは500。
  • mode:…スライド動作の種類。’horizontal’、’vertical’、’fade’の3種。デフォルトでは横スライドのhorizontalです。
  • pager:…ページャーの有無。true/falseで指定。デフォルトではtrue。
  • controls:…prev/next表示の有無。true/falseで指定。デフォルトではtrue。
  • prevText:…prev表示テキスト。『 ‘ (シングルクォート)』で任意の文字列を囲んで指定。
  • nextText:…next表示テキスト。『 ‘ (シングルクォート)』で任意の文字列を囲んで指定。

今回のスライダーは基本的な指定しかしていませんが、スライド内容に合わせてオプション設定が必要になります。スライド内に文章があるなら、その文を読み切れるだけの静止時間を指定したり、スライド動作をゆっくりにしたり、お好みで設定してください。
サンプルでフェード(fade)、縦スライド(vertical)の動きを確認がてら、各オプションを調整してみます。以下はmode指定版サンプルの調整例です。

サンプル3のスライダー指定
<script type="text/javascript">
$(document).ready(function(){
    $('.slider').bxSlider({
    auto: true,
    pause:  5500,
    speed: 800,
    mode: 'fade',
    pager:true,
    prevText: '<',
    nextText: '>'
    });
  });
</script>
CSS
/*サンプル3のprev・nextの調整例*/
.bx-controls-direction a {
	position: absolute;
	top: 40%;
	margin-top: 0;
	width: 30px;
	height: 30px;
	z-index: 9999;
	color: #fcfcfc;
	text-decoration: none;
	font-size: 35px;
	font-weight: bold;
	-moz-text-shadow: 1px 1px 2px #333333;
	-webkit-text-shadow: 1px 1px 2px #333333;
	text-shadow: 1px 1px 2px #333333;
}
.bx-prev {
	left: -25px;
}
.bx-next {
	right: -20px;
}

『fadeの動作+prev/nextを『<,>』で表示させたサンプル』と、『verticalの動作+●以外のページャーの表示サンプル』です→サンプル【3.modeを選ぶ(fade)】【4.modeを選ぶ(vertical)】を参照

※fadeサンプルのスライダーで『<,>』でprev/nextを表示し、text-shadow(CSS3)をかけていますが、IEではシャドウが表示されません。

vertical版は参考CSSなどは省略します。…というか、ここまでに書き留めたCSSも、書くまでもないと言われてしまえばその通りなんですが…。一応。

さらに『レスポンシブ対応』でしたね!

すっかり忘れるところでしたが、レスポンシブ対応も特徴の一つです。…ちょっと確認してないのですがver.3でもできたのかな?

ここまでミニサイズのスライドをサンプルにしてきましたが、レスポンシブ指定のスライダーならトップ画像とかに使用する方が良さそうですね。
こちらのサンプルでは880×400pxの画像をfadeで切り替えまして、レスポンシブ用にCSS指定しました。ブラウザのサイズに合わせて縮小されていくはずです→サンプル【レスポンシブ対応確認デモ】

このサンプルデモは、ブラウザサイズに合わせて縦横比をそのままに縮小していく、というものです(拡大させると画像が荒れるので、元サイズ以上にはなりません)。基本的には可変グリッド・リキッドレイアウトと仕組みは同じで、widthを%指定したり、必要に応じて最大幅を指定したり、heightをautoにしたり…で調整していきます。※デフォルトCSSも%指定されています。使用する画像のサイズに合わせてmax-widthなどを調整する必要があります。

リキッドレイアウトかレスポンシブデザインの中で画像切り替え機能が必要な場合に、きっと初心者の味方になってくれるのではないかと(スライダーだけをレスポンシブにしても意味がないので…)。
レスポンシブデザインの方法についてはさまざまなサイトで優良な解説記事が得られますので、そちらを参考に。

※2013.10.23.スライダーのレスポンシブ対応について記事を追加→追記・bxSliderのレスポンシブ指定をするの回

なんだか無意味に長い覚え書きになってしまいましたが、使える内容とは程遠いですね…。世の技術系サイトさんは本当にすごいな。
まぁ、こんな感じで初心者の学習の跡、という回でした。

そしてありがとうbxSlider


« »

Comment

当ブログにお越しいただきありがとうございます。
記事に対するコメント、不備の指摘などありましたらひっそりと書き残していただけると幸いです。
※コメントは承認制となっております

  • 2013年6月27日

    mekki

    ページャーが縦にならんでしまうのをなんとかしようとしてたどり着きました。
    .bx-pager-item{ display:inline-block;}で直りました、ありがとうございました。

    ひとつご報告ですが、サンプル2の
    12行目の .bx-pager a.hover, .bx-pager a.active {~
    の部分はhoverの直前のドットをコロン(a:hover)にしないと作動しませんでした。
    activeはなぜかドットでも効いてました。

    ともかくページャーはなんとかなりそうです。ありがとうございました。

    • 2013年6月28日

      管理人 管理人

      mekkiさん、コメントありがとうございます!
      お役に立てて良かったです。

      ご指摘の、
      >サンプル2の12行目の .bx-pager a.hover, .bx-pager a.active {~
      …の部分ですが、当方の記述ミスです…。すみません。

      この部分のhoverとactiveは、CSSの『擬似クラス』ですので、
      正しくは『コロンでなくてはならないところ』なのです。

      誤→a.hover, a.active
      正→a:hover, a:active です。

      混乱させてしまったようで、本当に申し訳ありません。
      activeだけがドットでも効くようですが、記述の際はコロンに直してください。

      記事も直しておきますね。自分では気付いてなかった箇所なので、
      今回指摘いただけて良かったです。ありがとうございました!


      このコメントに誤りがありましたので、訂正させていただきます。
      擬似クラスの『:』を付けるのはhoverのみ、activeはbxSliderのスクリプト内でクラス定義された部分のためドット『.』が正しいです。
      間違った記述・回答となってしまい、すみませんでした。2015.1.18追記、訂正

  • 2013年7月16日

    すこ

    IEでbxsliderの表示がうまくいかないで対処法を探しています。
    管理人様のこの記事がCSSの設定などで大変参考になりました。
    しかし、私の設定が悪かったのか、IEでの表示だけがスムーズにいきません。
    firefox,chromeではページャーの●の表示もちゃんとしててautoの設定で勝手にスライドするのですが、
    IEだとページャーが■で表示され、autoスライドのはずなのにスライドしてくれません。
    何回か更新すると稀にスライドしてくれます。
    マニュアルでページャーをクリックしても2、3回違う画像にスライドさせたらフリーズしてしまいます。
    何か解決策などないでしょうか?もし必要であればメールを頂ければHTMLの情報などメールでお渡しできます。

    • 2013年7月18日

      管理人 管理人

      すこさん、コメントありがとうございます。
      返答が遅くなってしまいすみません。

      ご質問の
      >IEだとページャーが■で表示され、
      については、「ページャーの表示にCSS3の角丸を使用しているため」に起こっています。

      当記事の【2.control部分を調整する】のCSSサンプル、
      8~10行目の-moz-border-radius、-webkit-border-radius、border-radiusの指定が
      CSS3の角丸指定です。
      通常は四角表示の四隅に5pxの丸みを指定することで、10pxの●を表示させています(右上右下、左上左下にそれぞれ5pxの角丸=10pxの●)。
      この指定は、IE8以前では表示されません。IE8以前はCSS3に対応していないからです。
      そのため、IE8以前ではwidth/heightの10pxだけが読み込まれ、■の表示となります。
      ※FirefoxとChromeはCSS3対応されてるので●表示されます(SafariやOperaも同様)。

      おそらく、すこさんがお使いのIEは、バージョン7か8ではないかと思われます。
      当記事のサンプルページも、IE8以前で表示すれば、●ページャーが■表示となります。この部分は不具合というより、仕様という感じでしょうか。
      ページャー自体が表示されているのであれば、その表示が●か■かは使用感を左右するものではないので、
      CSS3非対応のブラウザでの■表示は「そういうもの」と割りきってしまってよいと思います。
      全ブラウザで表示をできるだけ揃えたい場合には、CSS3を使わずこちらのページ下のサンプル4みたいな表示も一案です。

      そして、それ以外のIEでの不具合ですが、
      >autoスライドが動かず、ページャーをクリックしても2、3回違う画像にスライドさせたらフリーズ
      という事例は私も経験がないのでなんとも言えませんすみません。
      …が、お使いのIEでbxSlider本家サイトのスライダーが動作しているなら、各種設定ミスの可能性が高いです。

      想定される原因としては、
      1.jQueryのバージョンが合っていない。
      (bxSlider本家サイトで動作条件の確認。既にjQueryを使用していたサイトに新プラグインを追加した場合とかに起こりやすい)
      2.記述が正確ではない。
      (今回の事例では当てはまらないかもしれないが、ごくまれに、正確ではない記述でもブラウザによっては勝手に解釈して動作することがあるので)
      3.DOCTYPE宣言の問題。
      (またはhead部分の記述に不備がある可能性)…などでしょうか。

      3に書いたDOCTYPE宣言は、『このHTMLは○○の規格に沿って書かれています』ということを示すもので、
      これが無い、または間違っていると、ブラウザが適した解釈をできず、レイアウト崩れや
      jQueryの動作不良につながったりします。
      ちょっと調べた感じだと、DOCTYPE宣言のミスで、FirefoxやChromeは動くがIEだけjQueryが動かない、
      という今回のような事例が起きることがあるようです。確認してみると良いと思います。

      なんか長くなっちゃってすみません。解決になるかは分かりませんが、確認したり、試したりしてみてください。

  • 2013年8月2日

    ねこぱんち2

    ブログを始めたばかりの初心者です。
    このbxsliderはライブドアブログで直接使うことはできないのでしょうか。
    の記述ってどこに入れることなんだろう程度のレベルです。

    何とぞご教示いただけないでしょうか。

    • 2013年8月4日

      管理人 管理人

      ねこぱんち2さん コメントありがとうございます。
      返答が遅くなってしまってすみません。

      今回ご質問の、
      >ライブドアブログで直接使うことはできないのでしょうか
      の件ですが、私もこのサイトが初ブログなもので、ライブドアブログは使ったことないんですよ…。
      もっと言うと、ライブドア以外のブログサービスも使ったことないんですよ…orz

      なので、ライブドアブログでのjQueryのプラグイン使用法は分かりません。
      …ですが、ちょっと検索したところ、
      管理画面から、HTMLとCSSに手を加えられるカスタマイズ項目がありますし、
      HTMLのhead部分を追加記述できる項目もあるようなので、
      この辺の設定をいじって追加・記述すれば使えるのではないでしょうか。

      実際にライブドアのブログサービス使ったことないので、現在の仕様までは把握してないのですが、
      ライブドアブログ カスタマイズ jQuery』辺りのワードで検索すると
      設定方法を紹介してる記事がヒットしますし、使うことはできると思いますよ。

      ただし、HTMLCSSをいじることになりますし、head部分に(簡易的にですが)JavaScriptを記述するので、
      この辺の知識がまったくのゼロである場合は使わない方が無難かもしれません。

      スペルミスやカンマやコロンの打ち間違いで動かなくなるものなので、
      ある程度のHTMLとCSSの知識は必要だと思います(記事内のサンプルコードの内容が大雑把に分かる程度でいいんですが…)。

      不具合が出ても自分なりに対処法を見つけられるor調べて解決できる程度に知識があった方が、
      安心してブログカスタマイズできますよ。
      思い通りの機能を付けたいなら、ざっくりとHTMLやCSS(余裕あればJavaScript)辺りの勉強をしてから
      挑戦する方が失敗が少ないはずです。

  • 2013年8月4日

    ねこぱんち2

    コメント拝見いたしました。
    ご丁寧にありがとうございます。m(_ _)m

    少しくらいはHTMLとCSSがわかるよう勉強してみます。
    またこのページにもお邪魔させていただきますネ。

  • 2013年9月12日

    みかん

    大変見やすく、参考にさせていただきました。
    ありがとうございます。

    実際に自分で作成して分からなかった点がありましたので、質問させてください。

    自動再生にしていますが、左右のボタンやページャーをクリックすると自動再生が止まってしまいます(効かなくなる?)。
    この回避策はありますか?

    サンプルも拝見しましたが、同じようです…
    http://yane-ni-kabochano.com/demo/SliderDemo2

    よろしくお願いいたします。

    • 2013年9月13日

      管理人 管理人

      みかんさん、コメントありがとうございます。

      ご質問の
      >左右のボタンやページャーをクリックすると自動再生が止まってしまいます
      についてですが、
      今回こちらの記事で紹介した設定方法では、prev/nextやページャーなどの手動操作で自動再生が止まります。
      (bxSlider本家サイトトップのスライダーも同じく。)本家サイトトップにも紹介されている基本の設定では、
      手動操作で一旦auto設定が途切れるようになっているようです。通常仕様みたいな感じでしょうか。

      調べてみると(私も知らなかったので検索検索)、自動再生を維持する方法として、こちらの設定方法が見つかりました。

      $(document).ready(function(){
        var obj = $('.slider').bxSlider({
        auto: true,/*必要に応じてオプション設定*/
        pause: 5500,/*必要に応じてオプション設定*/
        onSlideAfter: function () { obj.startAuto(); }
        });
      });
      

      のように、2行目の$('.slider').bxSlider({の前にvar obj =を追加し、
      各オプション設定行の下にonSlideAfter: function () { obj.startAuto(); }
      を追加することで、スライド後に自動スタートさせることができます。

      私はローカル環境でしか確認してませんが、この追加記述で自動再生の維持ができるはずです。

      もしくは、記事内では紹介していませんが、本家サイトのこちらの設定で
      再生/停止ボタンを表示させる、という手段もありますが…
      今回の場合は、上記の追加記述の方が要望の動作に合っていると思われます。
      ちょっと試してみてください。これで解決されるとよいのですが…。

  • 2013年9月13日

    みかん

    kamimuRaさん、こんちには。
    早速試したところ、動作しました!!(ローカル以外でも動作確認済みです^^)
    こちらで質問する前にいろいろ試したのですが、勉強不足を実感しました…
    丁寧な解説と即答、本当にありがとうございました。

    • 2013年9月13日

      管理人 管理人

      みかんさん、解決したようでよかったです!
      jQueryプラグインはとても便利で、あまりJavaScriptに詳しくなくても色んな動作が実現できるのですが、
      思い通りに動かすには、やっぱり勉強から逃れられないという…orz
      今回の解決法も、私自身が知っていたわけではないですし(検索して見つけただけ)、
      私もまだまだ勉強が足りないですね…。

      初心者の勉強を兼ねた弱小ブログですが、お役に立てたならうれしいです。
      こちらこそありがとうございました。

  • 2013年10月8日

    hyroro

    kamimuRaさん、ありがとうです。
    おかげで、理想のスライダーに近づくことができました初心者のhyroroと申します。
    4日間彷徨いまして、kamimuRaさんの図解入りのおかげでページャーを画像下部に移動、空白スペースの縮小等ができました。
    ご多忙とはおもいつつもあつかましくもお尋ねなのですが、サンプル【レスポンシブ対応確認デモ】なのですが
    もうちょっとヒントいただけないでしょうか、数値をいじるんですが、いまいちポイントがつかめません。
    Iphone5で、横にするとつぎの画像も表示されてスライドという状況でして、サンプルのようにスムーズに移行できたらと…お手すきのときにでも気が向いたらご教授おねがいします。

    • 2013年10月23日

      管理人 管理人

      hyroroさん、コメントありがとうございます。返信が遅れまして本当にすみません。

      一応、レスポンシブ確認デモのサンプルコードを載せて、新しく追加記事にまとめてみました。
      参考になればいいのですが。→追記・bxSliderのレスポンシブ指定をするの回
      お困りの不具合の解決につながるかは分かりませんが…。

  • 2013年10月21日

    あもみかん

    初めまして。
    記事、とてもとても参考になりました。。

    そして実際に実装してみたのですが・・・
    どうしてもスライド画像がブラウザに合わせて伸びチジミしません。。
    原因などわかりますでしょうか。。
    本家サイトからダウンロードしたままそのまま使用しているのですが。。。

    • 2013年10月23日

      管理人 管理人

      あもみかんさん、コメントありがとうございます。

      スライドが縮小拡大しないのは、スライダー周辺のwidthに固定数値が入っているせいではないかと思います。%指定がうまく効いてないのでは?
      レスポンシブ設定についての記事を追加しましたので、こちらへどうぞ→追記・bxSliderのレスポンシブ指定をするの回

      一応サンプルで使用した設定法がまとめてあります。参考になればいいのですが…。

  • 2013年12月10日

    みす

    はじめまして、IE8で動かなかったので、こちらのページャー部分の記事の参考になりました。
    私の場合、スライダー画像の部分を角丸とドロップシャドウを入れるとIE8だとスライダーが表示されなくなったのですが、そのような事例がありましたので、やはり仕様上そうなのでしょうか…。
    自分なりに調べてみたのですが、もし中の画像をCSSで角丸成功しましたよという事があればご教示お願い致します。
    突然のコメント失礼いたしました。

    • 2013年12月11日

      管理人 管理人

      みすさん、コメントありがとうございます。とりあえず私が答えられる範囲で順番に。

      まず、角丸・ボックスシャドウ・背景グラデーション・マルチバックグラウンド等の『CSS3』は、IE8以下では非対応です。
      基本的にIE8以下では、角丸やシャドウの指定はブラウザ上で表現されません。角丸は角のまま、影は表示されません

      ご質問の事例では、スライダー自体が表示されないようですが、通常IE8では、CSS3効果は表示できないにせよ、要素自体は表示されます(今回の場合は、画像は四角で影なしのスライダーが表示されるはず)。
      スライダーそのものの表示ができないということは、記述(ScriptかHTMLかCSS)に何らかの問題があり、IE8が処理し切れず、スライダーの読込みを停滞させているのかもしれません(他のブラウザが柔軟に処理できる記述でも、IE8以下では引っかかることもあります)。bxSlider自体はIE8でも動作するので、スライダー表示できないのはIE8の問題ではないように思います。

      >スライダー画像の部分を角丸とドロップシャドウを入れると
      スライダーの『中の』画像(liまたはimgの部分)に対してCSS角丸・シャドウを指定されているということでしょうか。
      画像そのものの形を調整するなら、CSSで調整するよりは、使用画像を最初から必要な形に切り抜いて用意した方が手っ取り早いかもしれません(透過pngなど)。ブラウザに左右されずに形状を確実に維持できますし…。
      個人的には、スライド『画像』をCSSで角丸にさせる事例はあまり見かけないかな…?と思います。
      (※liやimg、または.bx-viewportに対して角丸調整することは可能だと思います。ただ、私が簡単に試した範囲だと、こまごまと調整がいる印象でした。意外とIE以外のブラウザも表示に癖があるので、画像加工の段階で手を加えた方が楽そう…と思えました)

      どうしてもCSS3が必要な場合は、各種スクリプトを利用すればIE8以下でもCSS3を使えるようになります。
      たとえば角丸使用なら、『IE8 角丸 実装』で検索すると、
      CSS3 PIEJQuery Cornercurved-cornerなど色々出てくるので、用途や都合に合わせて検討すると良いと思います。

      長くなってしまいましたが、参考までに。

  • 2013年12月13日

    yuki

    はじめまして、今回bxsliderの設置に伴いサイトのほうをかなり参考にさせていただきましたhtml,css初心者です。少し記事では判りかねていたところだけご質問させていただきたいのですが、bxslider4.0のバージョンに入っていたcssをそのまま使いhtmlに実装したんですが、ie6で見るとページャーのとこだけ左寄せになってしまいます。kamimuRaさんが作られたデモページはie6もしっかり対応されていて、ページャーも中央揃えになっていましたが。そこの部分をどのようにie6対策されたか教えてください。お願いします。因みに実装サイトには予めヤフーのcssクリアを記述してから記述しています。

    • 2013年12月14日

      管理人 管理人

      yukiさん、コメントありがとうございます。

      >(bxslider4.0のcssをそのまま使い、)ie6で見るとページャーのとこだけ左寄せに
      bxSlider ver.4.0のブラウザサポートについては(本家サイトのFAQs参照)、”IE8 and IE7 have been tested and work just fine.”という記載がありますので、IE6は対応外なのではないかと思います(動作しないわけではないけど、各挙動の確認はされていないという感じでしょう)。
      このver.4.0は、レスポンシブ(可変)対応に焦点を当てたバージョンのようなので(デフォルトCSSもレスポンシブ仕様となっています)、基本的には新しめのブラウザでの動作を想定したプラグインであると言えそうです。IE6での使用を考えるならば、デフォルトのCSSも微調整が必要になると思われます。

      >(記事内のデモページはIE6でも)ページャーも中央揃えになっていました
      …実は当サイトの対応ブラウザはIE8からです(IE7以下は特に対応させてませんすみません)。
      IE6対策と言えるものは特に施していないのですが、デモページはIE6でも崩れていないというご報告から、一応思いつく範囲で。

      デフォルトCSSの40行目あたりの、

      .bx-wrapper .bx-pager,
      .bx-wrapper .bx-controls-auto {
      	position: absolute;  /*もしかしたらこの辺の指定の影響かも*/
      	bottom: -30px;
      	width: 100%;
      }
      

      という指定をはずしてみてください(/と*で挟んでコメントアウトさせても可。もし間違ってもすぐ元に戻せるので)。小スライダーのデモにはこの部分の指定は使っていません。それとデモでは.bx-wrapperのwidthをpx固定してあります。デフォルトと記事内デモの指定の違いはこの辺かな…?
      (※デフォルト指定の一部をはずすことになるので、別の表示のズレを起こす可能性もあります。要調整・他ブラウザでの確認)

      IE6はposition: absolute関係の表示崩れがあるようなので、もしかしたら…という感じです。検索すると事例がいろいろ出てきますので、参考までに。これが原因なのかはちょっと確証もないのですが…。

  • 2014年1月19日

    wt

    初めまして、誠に恐縮ですが質問させて頂きます。
    こちらのサイトを参考にし、参照ウェブサイトのトップページにスライダーを設置してみました。(大変参考になりました!)
    動作自体は問題ないのですが、スライダー枠の上下に5px程度の余白ができてしまいます。
    他のページと同様のレイアウトに調整しようと考えたのですが、関連CSSのパディング、バージンなどを0pxにしても、
    どうしても上下に余白ができてしまいます。
    何か対策がありましたら、ご教授頂けないでしょうか?宜しくお願いします。(^^;

  • 2014年1月19日

    wt

    先程質問した者ですが、原因が分かり解決しました。(汗)
    ul要素が原因で上下に余白ができていたようです。CSSで再定義するのが面倒なので、これをに置き換えたら難なく解決しました。
    あまり他の方の参考にならないコメントだと思いますので、非承認のままでOKです。
    今後もこのサイトを参考にさせて頂きます。

    • 2014年1月19日

      管理人 管理人

      wtさん、コメントありがとうございます。
      コメント承認が一足遅くなってなってしまいましたね、スライダーも無事に設置されたようでなによりです。

      非承認のままでOKとのことでしたが、余白関連で悩む方がいたら参考になるかとも思いますので、

      コメント承認(公開)させていただきました。
      (少しズレがある場合、ulの指定が影響していないか、などの判断材料になりそうです。意外と見落とされる部分かもしれません)

      もし、どうしてもコメント削除希望でしたら、お手数ですがあらためてコメント欄へその旨をご連絡ください。

  • 2014年1月19日

    wt

    管理人 様

    返信ありがとうございます。コメントは公開でOKです。
    設置の際にシビアなレイアウトをしたい方には、私的にはulよりdivを推奨します。(笑)
    やはデフォルトの仕様が反映されてしまうので、CSSで調整しなおすのも面倒だと思います。
    CSSの初歩的なことを見落としていただけなのですが、何せ初めてのプラグイン設置となると、いろいろと勘ぐりたくなるものですね。
    恥ずかしながら4時間くらい迷走していました。(汗)
    設置までは数分でしたが、スライダー(img要素)枠の上下に5px程度の透過余白ができてしまい、
    管理人様の「大体こんな?スライダーの構成要素」を見ながら、疑わしい関連CSSを片っ端から調整していました。
    まさか犯人がul要素だったとは?という感じです。(笑)
    li要素のマージン調整に気が付いていたのに、何でul要素をスルーしてしまったのか?と我ながら恥ずかしい限りです。
    大変助かりました。これからも参考にさせて頂きます。

  • 2014年2月19日

    hithit

    はじめまして。質問させて頂きます。
    今回、bxSliderの設置にあたり、とても参考にさせて頂いております。
    初心者ですので、かなり勉強になりました。
    おかげ様で完成したのですが、
    ページャーの●が並んでいる部分で、こちらのサイトのデモでは、
    表示されている画像の●は色が変わっているのですが、
    私のではマウスオーバーとクリックの時以外は、ずっと他と同じ色になっています。

    原因は何が考えられますでしょうか。
    初歩的な質問かもしれませんが、ご教示の程、よろしくお願いします。

    • 2014年2月20日

      管理人 管理人

      hithitさん、コメントありがとうございます。

      ご質問のページャーの色変化について、考えられる範囲で。
      ページャーの色については、CSSの

      .bx-pager a:hover,
      .bx-pager a.active {/*←2015.1.18クラス部分訂正しました*/
          background: #000;/*←適当な色*/
      }
      

      の指定で調整しますが、a:activeはしっかり記述されていますか?(スペルミスはありませんか?)
      hoverはマウスオーバー時の指定、activeはクリック時とスライド表示時の指定です。
      “マウスオーバーとクリックの時”は色変化しているとのことですが、a:hoverの指定は生きていると思われます。
      しかし、クリック時の色変化があってもa:activeが生きているとは限りません。
      (クリックするときはマウスオーバーしているため、hover状態でもあります。active指定が無くてhover時の色が表示されているだけ、という場合も考えられます)
      この辺りを確認してみてください。


      もしもa:activeがしっかり記載された状態でありながら、画像の切り替わりに合わせて色変化しないという場合は、
      すみません、原因が特定できません…。



      このコメントに誤りがありましたので、訂正させていただきます。
      擬似クラスの『:』を付けるのはhoverのみ、activeはbxSliderのスクリプト内でクラス定義された部分のためドット『.』が正しいです。
      完全に私の記述ミスであり、確認不足の状態で誤った回答をしてしまいました。
      混乱を招いてしまい本当にすみませんでした。2015.1.18追記、訂正

  • 2014年2月20日

    hithit

    管理人様

    ご回答ありがとうございます。
    a:activeは記述されております。
    試しに、a:hoverとa:activeを分けて記述し、a:activeの方だけ色を変えてみたのですが、
    クリックしたときにa:activeで指定した色になるだけで、マウスを乗せていない時は、
    他と同じ色でした。

    もう少し色々試してみます。
    一応コード記載しますので、お気づきの点があればお願いします。

    .frameLine {
    	padding: 20px;
    }
    .bx-wrapper {
    	width: 694px;
    	margin: 18px auto;
    	position: relative;
    }
    .bx-wrapper .bx-pager {
    	text-align: center;
            margin-top: -1px;
    }
    .bx-wrapper .bx-pager .bx-pager-item {
    	display: inline-block;
    	*zoom: 1;
    	*display: inline;
    }
    .bx-wrapper .bx-controls-direction a {
    	position: absolute;
    	z-index: 9999;
    }
    .bx-prev {
    	left: 10px;
    }
    .bx-wrapper .bx-next {
    	right: 10px;
    }
    
    
    .bx-pager a {
    	background: #666666;
    	text-indent: -9999px;
    	display: block;
    	width: 10px;
    	height: 10px;
    	margin: 0 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    }
    .bx-pager a:hover,
    .bx-pager a:active {
    	background: #ffffff;
    }
    
    
    .bx-controls-direction a {
    	position: absolute;
    	top: 40%;
    	margin-top: 0;
    	width: 40px;
    	height: 40px;
    	z-index: 9999;
    	color: #B3B3B3;
    	text-decoration: none;
    	font-size: 30px;
    }
    .bx-prev {
    	left: 20px;
    }
    .bx-next {
    	left: 660px;
    }
    
  • 2014年5月14日

    かしる

     jQueryのスライドショーに手を出してみたものの、ページャーのカスタマイズに困っていましたが、この記事に出会えてよかったです。
    これからはデベロッパーツール等で自力で解決できるようしていきたいと思います。

    • 2014年5月15日

      管理人 管理人

      かしるさん、コメントありがとうございます。
      私自身も、jQueryのカスタマイズや調整に四苦八苦する初心者側なので、この記事が少しでもお役に立てたなら嬉しいです。
      かなり読みにくいブログだと思うのですが、それでも読んで参考にしてくれてありがとうございました。

  • 2015年1月6日

    masa

    管理人様
    あけましておめでとうございます。HPにスライダーを設置しようと年末から四苦八苦している初心者です。
    やっとこのサイトにたどりつきなんとか動くようになりました。ありがとうございます。
    一つだけどうしようもないことがあり、ご質問させていただきます。
    スライドが動いている最中にブラウザの再読み込みをすると画像が消えてしまいます。その後何度読み込んでも復活せず、ページを開き直さないと画像が表示されません。
    ※枠のサイズを動かしていると自動スライドが止まってしまい、そんな時に再読み込みするのですが…
    原因は何が考えられますでしょうか。
    初歩的な質問かもしれませんが、お教えいただければと思いメールさせていただきました。
    ご教示の程、よろしくお願いします。

    • 2015年1月7日

      管理人 管理人

      masaさん、コメントありがとうございます。明けましておめでとうございます。

      ご質問の、『スライドが動いている最中にブラウザの再読み込みをすると画像が消える』という挙動は、
      私も遭遇したことがないので、原因の特定が難しいのですが…。
      bxSliderがうまく動かない場合の確認ポイントをいくつか挙げてみます。

      ・script(オプション指定)の最終行に「,」がついていないか

      $(document).ready(function(){
      	    $('.slider').bxSlider({
      	    auto: true,//自動切り替えの有無
      	    prevText: '前へ', //前へのテキスト
      	    nextText: '次へ' //次へのテキスト
      	    });
      	  });
      

      ↑の記述例でいうところの3~5行目(modeやspeedなどの指定部分)。最終行に「,(カンマ)」が入っていると、動作不良を起こしやすいです。

      ・jqueryのバージョンを確認する
      jqueryのバージョンによって動作不良が起こる場合もあるようです。1.8.2では普通に動く、1.7.1だと動作不良が起こる、というようなことがあるそうなので確認が必要です。

      あとは、『読み込みに時間のかかる重い画像を使っていないか』や、『スライダー以外にも複数のプラグインを使っているため、再読み込みで処理し切れない可能性』…など。基本的な部分しか思いつかないのですが、一応参考までに。

      >※枠のサイズを動かしていると自動スライドが止まってしまい、
      この挙動は確認しました。横スライドでレスポンシブ(%)指定のとき、ブラウザサイズをマウスドラッグで動かしていると、自動スライドが停止することがある?みたいですね。
      横スライドの場合に起こりやすいのは、ブラウザ幅の変化で、スライド移動幅がうまく算出できなくなるから自動スライドが止まってしまう、のではないでしょうか…。fadeの場合は大丈夫でした。

      こちらの挙動も詳しくは分かりません。あまり参考にならなくてすみません。

  • 2015年1月16日

    yoshi

    はじめまして。超超初心者で参考にさせて頂いております、ありがとうございます。
    私もa:activeで行き詰まったのですが、元のCSSどおりa.activeにしたら期待どおり色が変わりました。
    何でかなぁ、、って理由がわかれば一歩前進できそうなのですが・・・

    • 2015年1月17日

      管理人 管理人

      yoshiさん、コメントありがとうございます。
      そして、ご質問の件ですが、すみません完全に私のミスです。申し訳ありませんでした。

      記事本文中のサンプルコードにて、ページャーのactive時の指定に、擬似クラスの『a:active』の記述をしていましたが、改めて確認したところ、ここはクラス指定にしないと反映されない部分でした。
      yoshiさんのコメント通り、a.activeが正しいです

      bxSliderの場合、擬似クラスのa:activeはどうも指定できないようです。同じ擬似クラスでも、a:hoverは指定できるのですが、activeについては、スクリプト内でclass=”active”という指定がなされているようで、擬似クラスの『:(コロン)』では反映されません。

      デモでは表示(記述)が合ってるのに、記事のコードが長らく間違っていたのは、
      デモ用に書いたサンプルコードを記事に引きうつす際にまず『.hover』と書き間違え記事up→コメント欄にて「hoverが反映されない」という連絡を受け→「あ、ここ擬似クラスだった」とhoverといっしょに間違えてactiveまでコロンに書き換えてしまった私のミスによるものです。そのせいで記事の指定そのままの記述では「activeが反映されない…」という悪魔のような記事になっていました(そのくせ記事のサンプルデモは普通に表示されているので、さらなる混乱を招いた)。

      この記事を参考にしてくれた方々を混乱させる内容となってしまい、本当にすみません
      yoshiさん、元のデフォルトCSSと記述が違う、という報告をくださって本当にありがとうございます。本文訂正いたします。

      • 2015年1月19日

        yoshi

        管理人さま
        的確な調査とご報告、ありがとうございました!
        思い切ってコメント書かせていただいて良かったです。
        a:hover a:active こういうセットものだと信じていたので、とても勉強になりました。
        目頭がアツいです、本当にありがとうございました。

      • 2015年1月20日

        管理人 管理人

        yoshiさん、今回の件はご指摘いただけて本当に感謝しています。

        >a:hover a:active こういうセットものだと~
        まさしく私自身もそうした思い込みがあって、最初の書き間違えを直す際に勘違いしてしまいました…。

        今回、間違いを訂正できて本当に助かりました。こちらこそありがとうございました。

  • 2015年6月8日

    sakfrf

    こんにちわ。とってもわかりやすくて勉強になりました。ありがとうございます。

    • 2015年6月14日

      管理人 管理人

      sakfrfさん、承認が遅くなりすみません。
      お役に立てたならとてもうれしいです。コメントありがとうございます。

  • 2015年8月29日

    たこ

    丸1日、いろいろググって調べた挙句、「出来ない~、私ってバカなのかなぁ。。」とあきらめようとしたら、
    このサイトを見て出来ました。いちばんわかりやすかったです。
    (わたしのは、jquery/1.10.2/で動きました)
    ありがとうございますです。

    • 2015年8月30日

      管理人 管理人

      たこさん、コメントありがとうございます。
      jquery1.10.2で動きましたか~!こういうvar.の情報もいただくと参考になります。

      こちらこそありがとうございました。

  • 2015年11月30日

    ムタツ

    bxsliderの使い方で困っていたところこちらのサイトですごく助かりました!
    いくつか質問なのですが
    ・ページャーがまれに表示される位置がすごく下になっているときがあります。
    サイトを更新したら元の位置にもどるのですがこれは仕方ない事なのでしょうか?
    ・これもまれにおこるんですが突然4枚目の画像からスタートします、しかもページャーの番号が4枚目のはずが1枚目と表示されます、一周するときには元の1枚目がページャーでも1枚目となるのですがこれはおかしいのでしょうか?それとも仕様ですか…?

  • 2015年12月20日

    かずき

    bxsliderについて この記事を見て、色々と参考となり助かりました!
    質問なのですが、縦横の大きさの違う画像を使用すると
    次の画像が、下に回り込んで動かなくなります。
    理想は、大きさの違う画像でも viewportの真ん中にくるようにしたいです。
    解決策等ご存知であれば、教えていただけないでしょうか?

    • 2015年12月21日

      管理人 管理人

      かずきさん、コメントありがとうございます。

      個人的にスライダーを利用する場合は、使用画像のサイズをあらかじめ揃えてしまうので(楽ですし)、サイズ違いの画像の調整はやったことがありません。
      あえてサイズ違いの画像を真ん中に配置させるとしたら、使用画像にmarginかpadding指定で余白調整するとかでしょうか。当記事のサンプルではulでスライダーをつけていますが、divにしても使用できるので、画像を囲むdivに基準となる幅・高さを指定し、各画像に対してmarginで調整をかける感じかな…?と思います。この方法でできるかどうかは確証がありませんが。

      単純に画像を切り替えるだけならば、あらかじめサイズを揃えたものを使う方が楽ではありますが(あとは『見栄え』という点でサイズ感は統一させた方がキレイかな…とも思います)、参考までに。

  • 2016年7月27日

    としこ

    こんにちは!
    とてもわかりやすい記事をありがとうございます。
    大変参考になりました。感謝申し上げます!

    • 2016年7月31日

      管理人 管理人

      としこさん、コメントありがとうございます。
      だいぶ前に書いたものですが、
      冗長な記事にも関わらず、読んでいただけてうれしいです。
      ありがとうございました!

  • 2016年8月6日

    ネコラジオ

    bxsliderについて大変わかりやすく書いていただきありがとうございます!
    質問なのですが、ヤフーショッピングのトップページにbxsliderを設置したのですが、
    画像が表示されずにローディング画像とページャーと画像選択ボタン(したにある●)だけが表示されます。
    ページを何度か再読み込みするときちんと表示されるようになります。
    解決策ご存知であれば、ご教示いただけないでしょうか?

  • 2016年8月6日

    ネコラジオ

    追記なのですが、画像選択ボタン(したにある●)を押せば正常に動作するのですが、左右の矢印ボタンを押すととたんに画像が表示されずローディング画像が出てきてしまいます…。もうどうしたらいいのかわからず…どうかお助けください…。

    • 2016年8月29日

      管理人 管理人

      ネコラジオさん、承認が遅れてしまってすみません。コメントありがとうございます。

      ご質問の件ですが、私はyahooショッピングを利用してページを作成したことがないので、回答することができません。
      現在のyahooショップの仕様は分かりませんが、以前は「プランによってはJavascriptやjQueryの実装そのものが非対応であった」という記事も散見されますので、お使いのプランのカスタマイズ範囲で、外部プラグインでのスライダー実装が可能かどうかを改めて確認してみてください。
      スライダーを実装しているショップ自体はありますが、それが外部jQueryによるものなのか、上位プランのオプション機能によるものなのかは私では分からないので、回答することができません。
      「ローカル環境のHTMLページで動作するのに、yahooショップで実装しようとすると動かない」場合は、カスタマイズ制約や独自設定が必要である可能性がありますが…。yahooに限らず、ショッピングモール系のページデザインカスタマイズは、サービスごとに様々な制約がありますので、カスタマイズマニュアル等を参考にされた方が確実だと思われます。

  • 2016年12月26日

    まめ

    bxsliderについて手探りでやっている中、大変分り易い記事をありがとうございます!
    参考にしています。
    そんな中で一つお教えいただきたいことがあります。
    スライダーを作成する中でpagerをtrueにしているのですが、黒丸でなく数字が縦に表示されてしまいます。
    この場合どのようにすれば黒丸にすることができるでしょうか?
    現在は数字が見えると邪魔なのでpagerをfalseにしています。
    もし宜しければ解決法をお教えいただけませんでしょうか?
    お手数をお掛け致しますがどうぞよろしくお願い致します。

    • 2017年1月2日

      管理人 管理人

      明けましておめでとうございます。
      まめさん、コメントありがとうございます。

      pagerを黒丸表示させる方法は、記事内の
      オプション・CSSでスライダーを整える」の
      2.control部分を調整するに記載がありますので
      ご参考下さい。

      ありがとうございました!

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

trackback / pingback

ページトップへ