문자열 "f002"및 "f001"을 화살표 이미지로 변경

before after

이미지 사용남국의 바다에서도 갱신을 게을리하지 않는 의식이 높고(비싼) 슈트 자태의 블로거 [모델: 대천용미].

before

after

해설

위의 이미지와 같이 문자열 "f002"및 "f001"을 화살표 이미지로 변경합니다.
참고로 슬라이드 쇼 아래 단추의 색을 바꾸는 방법도 실었습니다.
FlexSlider 2다운로드를 시작한woothemes-FlexSlider-2.5.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