CSS
jQuery

★FlexSlider 2 ★文字列「f002」と「f001」を矢印画像に変更する

More than 3 years have passed since last update.


before after

画像は南国の海でも更新作業を怠らない意識の高いスーツ姿のブロガー [モデル:大川竜弥]を使用した。


before

イメージ420094.jpg

イメージ420095.jpg


after

イメージ420097.jpg

イメージ420096.jpg


解説

上記画像のように文字列「f002」と「f001」を矢印画像に変更する。

ついでに、スライドショーの下のボタンの色の変え方も載せておく。

FlexSlider 2からdownloadしてきたwoothemes-FlexSlider-2.5.0-0-g83b3cae.zipの中に入っている

flexslider.cssとjquery.flexslider.jsの$.flexslider.defaultsの中身を次のように変える。

矢印の画像arrow-left.pngとarrow-right.pngはやじるし素材天国「矢印デザイン」にあった画像を使用した。

arrow-left.pngとarrow-right.pngは幅:35ピクセル、高さ:35ピクセルである。


flexslider.css(before)

.flex-direction-nav a:before {

font-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}


flexslider.css(after)

.flex-direction-nav a:before {

font-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '';
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 255,0.9);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 255, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(255, 0, 0, 0.9);
cursor: default;
}
.flexslider:hover .flex-prev { opacity: 0.2; left: 10px; background: url(../images/arrow-left.png) no-repeat left; }
.flexslider:hover .flex-next { opacity: 0.2; right: 10px; background: url(../images/arrow-right.png) no-repeat right; }



jquery.flexslider.js(before)


prevText: "Previous",//String: Set the text for the "previous" directionNav item
nextText: "Next",//String: Set the text for the "next" directionNav item



jquery.flexslider.js(after)


prevText: "", //String: Set the text for the "previous" directionNav item
nextText: "", //String: Set the text for the "next" directionNav item



参考文献

FlexSlider 2

やじるし素材天国「矢印デザイン」

フリー写真素材ぱくたそ(モデル 大川竜弥)

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

高速スライダーのJQueryプラグインFlexSlider2の使用方法