Meta Sliderプラグインの●ポッチのカスタマイズ方法

解決済 hanahana-mai
(@hanahana-mai)

8年、 6ヶ月前

現在Meta Sliderというプラグインを利用しています。

設定自体はうまくいきまして、正常に動いてはいるのですが、少しカスタマイズしたい箇所があるのですが、カスタマイズを外部から行う定義がないため困っています。

具体的には、例えば画像を5枚設定すると、スライド画像の下に丸いポッチのようなものが表示され（表示する設定にしています）、画像のスライドと一緒にこの丸部分もスライド移動する部分があります。

この丸部分の位置調整を行いたいのですが、HTMLソースから確認しても、この部分の定義がないためCSSとかでは編集が出来ないようなのです…。

現在スライダーは、普通のスライド設定で丸ポッチ部分はナビゲーションというのでしょうか？「点」という設定にしています。

この丸ポッチの位置を変更する方法が分る方いらっしゃいましたら、アドバイスをいただけないでしょうか。

※Meta Sliderのバージョンは3.3.5です、無料版です。

宜しくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)

nobita
(@nobita)

8年、 6ヶ月前
こんにちは、

テーマによって、指定は異なるとは思いますが
（スライダーは、flex sliderを選択した場合）
```
#top .flex-control-nav{
    border:1px solid red;
    text-align:left;
}
```
のようにCSSを指定すれば、変更は可能みたいです。
（#topは、スライダーの親要素のIDなどに読み替えてください）

ソースは、ブラウザの「要素を検証」等でDOMソースでみるといいと思います。

http://www.tenman.info/wp3/manualraindrops/files/slider-nav-position.jpg
トピック投稿者 hanahana-mai
(@hanahana-mai)

8年、 6ヶ月前

nobita様

有難う御座います。
上記に教えて頂いた方法で試してみたのですが、これはインラインの要素なのでしょうか？
text-alignやborderなどはうまく適用されるのですが、margin-top:-100px;など、丸ポッチを上に引き上げようと試すのですが反応がありません。

flex-control-navの外にブロック要素を配置するなど、何か丸ポッチを上に引き上げる方法はありませんでしょうか？

あと、素人で申し訳ありません。
教えて頂いた

ソースは、ブラウザの「要素を検証」等でDOMソースでみるといいと思います。

という部分が調べてもいまいち分らず。
これは、クロームで見て、Source内にありますDOM Brakepointという部分でしょうか？
その場合中身はNoBrakepointとしか表示がなく、クリックなどは出来ない感じなのです…。

宜しくお願いいたします。
nobita
(@nobita)

8年、 6ヶ月前
クロームで、スライダーの場所にカーソルをあわせて、右クリック（win）「要素を検証」をクリック　して表示すると、
```
<ol class="flex-control-nav flex-control-paging">
...</ol>
```
が見えると思います。

スタイルは、flexslider.cssでコントロールされています。
```
plugins/ml-slider/assets/sliders/flexslider/flexslider.css
```
```
margin-top:-100px;
```
が効かないのは、position:absolute;が指定されているためだと思います。

flex-control-navの外にブロック要素を配置するなど、何か丸ポッチを上に引き上げる方法はありませんでしょうか？

テストはしていませんが、flex-control-navの親ブロックで position:relativeをセットして、flex-control-navでtop:-xxxpx;などとしてみてどうでしょう
この先は、何とか頑張ってみてください
トピック投稿者 hanahana-mai
(@hanahana-mai)

8年、 6ヶ月前

nobita様

何度も有難う御座います！

アドバイスいただきました通り、クロームから確認することでソース？を見ることが出来ました。positionの設定と位置調整を行うことで、何とか希望する表示になりました。
本当に有難う御座いました！！

4件の返信を表示中 - 1 - 4件目 (全4件中)

トピック「Meta Sliderプラグインの●ポッチのカスタマイズ方法」には新たに返信することはできません。