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行目から修正と追加
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
コメントを残す