FlexSlider2 戻るボタン「Prev」・進むボタン「Next」修正
2015年7月20日
Categories | ホームページ
当サイトに「FlexSlider2」を導入してみたが、戻る[Previo]・進む[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」を利用。
修正前（デフォルト）
修正はまず「jquery.flexslider-min.js」内の「Previo」と「Next」を検索し削除。
次に「flexslider.css」内を修正。
117行目から修正と追加
1 2 | width: 40px;height: 40px; |
↓
1 2 3 | width: 46px;height: 30px;padding-top:16px; |
145～151行内の148行と152行を修正
1 2 3 4 5 6 7 | .flex-direction-nav .flex-prev { left: -50px;}.flex-direction-nav .flex-next { right: -50px; text-align: right;} |
↓
1 2 3 4 5 6 7 8 | .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
