FlexSlider2スライドショーで矢印アイコンが表示されない

スマホでも利用できる多機能型JQueryスライドショー・FlexSlider2を利用しようとDLする。

簡単なカスタマイズを始めると左右の矢印ボタンアイコンが表示されていない。

代わりに、小さく"f002"と"f001"と小さな文字が二文字目で折り返されて四角で表示されている。

foo1って何だろう？？？

矢印ボタンアイコンを表示させるための方法と記述について。

まずダウンロード解凍すると、demoフォルダ内にスライドショーのサンプルがいくつかあります。

今回はindex.htmlファイルを編集。
jquery.flexslider.jsとflexslider.cssが上位フォルダにあるのでそれぞれ同じ階層のフォルダに複製し、index.htmlの読み込みパスを修正。

他、不要な記述やJQueryライブラリの記述を削除。

これで、ウィンドウサイズに合わせて伸縮するスライドショーが完成。ただ、左右の矢印ボタンのアイコンが表示されていないので、flexslider.cssを編集。

まずはimagesフォルダ内に透過ＰＮＧボタンを作成して用意します。

flexslider.cssの編集では、まず

.............................................の値だった。

64行目の
.flex-direction-nav a　セレクタで作成したボタンサイズに合わせheigt、widthを編集。


....................................

一枚のアイコン画像でCSSスプライトを使う場合は、

...................................と記述する。

また念のためボタン部分をテキストで表示させる場合の設定が、
jquery.flexslider.jsの
..........................................................
となっているので、ここを

.................................としておく。

あとはパスが間違えていなければ、正常に表示されます。


また、スライドショーの大きい画像とサムネイル一覧の間に空間が空きすぎる場合は、スライドショー部分のCSS記述か、
縦の長さの異なる画像を読み込んでいる場合があるので、どちらかを調整するとよいようだ。