FlexSlider2 戻るボタン「Prev」・進むボタン「Next」修正

Categories | ホームページ

当サイトに「FlexSlider2」を導入してみたが、戻る[Previo]・進む[Next]ボタンの

下のテキスト文字だけを消したかったので、ファイルをいじって修正しました。

FlexSlider2 400x253 FlexSlider2 戻るボタン「Prev」・進むボタン「Next」修正

本家サイト:http://flexslider.woothemes.com/

バージョン:FlexSlider 2  v2.5.0

デモファイル:thumbnail-slider.html

使用ファイル: jquery.flexslider-min.js / flexslider.css / fontsフォルダ

※ 「jquery.js」は他の兼ね合い(sidr)もあり「v2.1.1」を利用。

 

修正前(デフォルト)

20 01 400x246 FlexSlider2 戻るボタン「Prev」・進むボタン「Next」修正

修正はまず「jquery.flexslider-min.js」内の「Previo」と「Next」を検索し削除。

次に「flexslider.css」内を修正。

 

 

117行目から修正と追加

 

  width: 40px;
  height: 40px;

 

 

  width: 46px;
  height: 30px;
  padding-top:16px;

 

 

145~151行内の148行と152行を修正

 

.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}

 

 

.flex-direction-nav .flex-prev {
  left: -50px;
  text-align:center;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: center;
}

 

※ あくまでも当サイト仕様なので、変更したサイズ「px」は各自微調整が必要です。

サンプルページ:https://www.hcz.jp/spec.html

Comment(0) | Trackback(1)

TAGS: / / / / / / | 2015年7月20日 |

« »

コメントを残す

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