Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@kyoshiro-obj

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

More than 5 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の使用方法

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kyoshiro-obj
1980年代生まれのゆとり世代. 日々プログラムの勉強をしています。 youtubeでパソコン関係の動画もアップロードしてます https://www.youtube.com/user/kyoshiro0311

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?