こんにちは
コンテンツ項目をオフにしているので、オプション欄に入力しても反映されない、ということだと認識していますが、
こちらは、下記のような CSS でリンクが有効になります。
.xo-slider .slide-content {
pointer-events: none;
}
スライドにマウスオーバーした際、
半透明の背景と文字を、スライド下半分くらいに乗せたいです。
コンテンツに入力した文字をホーバー時に表示するサンプル CSS です。
.xo-slider .slide-content {
pointer-events: none;
}
.xo-slider .slide-content-text {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 32px 0;
background: rgba(0,0,0,0.5);
color: #eee;
text-align: center;
transition: opacity .6s;
opacity: 0;
}
.xo-slider .swiper-slide:hover .slide-content-text {
transition: opacity .6s;
opacity: 1;
}
ご教授くださりありがとうございます!
いただいたコードをいったんそのままCSSに追記しました。
リンクとキャプションの両立は叶いました!
ただ、常にキャプションが表示されてしまっていて、CSSで背景色など変更してみても反映されませんでした。
https://imalife-blog.com/xo-slider/
こちらを参考にオプション欄を編集して、フォントの色とサイズを変更することはできました。
あとは、サムネイルのサイズが220px*147pxと小さくて、ナビゲーションの領域までキャプション表示に使えると嬉しいのですが可能でしょうか?
サンプルの CSS は、「オプション」の「タイトル」ではなく、「コンテンツ」が対象です。コンテンツに文字を入力してみてください。
ナビゲーションの領域までキャプション表示に使えると嬉しいのですが可能でしょうか?
「コンテンツ」はナビゲーション領域が含まれます。
ありがとうございます。
コンテンツに入力しても変わらなかったので、タイトルも編集してみた次第でした…。
すみません。先のサンプルは Default テンプレート用でした。他のテンプレートの場合は、下記のような CSS になります。
.xo-slider .slide-content {
pointer-events: none;
}
.xo-slider .swiper .swiper-slide .slide-content {
position: absolute;
top: auto;
left: 0;
bottom: 0;
width: 100%;
height: auto;
padding: 32px 0;
background: rgba(0,0,0,0.5);
color: #eee;
text-align: center;
transition: opacity .6s;
opacity: 0;
}
.xo-slider .swiper-slide:hover .slide-content {
transition: opacity .6s;
opacity: 1;
}
ありがとうございます!
テンプレートはDefaultを使っていたのですが、新しく教えていただいたCSS切り替えたらできました…!
助かりました…!