サポート » プラグイン » XO Sliderでリンクとキャプションを両立させたい

  • 解決済 samesun

    (@samesun)


    XO Sliderでスライドを作成し、各画像にリンクを挿入、lightboxプラグインを利用してポップアップするようにしています。
    なので、「コンテンツ」の項目をオフにしています。
    コンテンツ項目をオフにしているので、オプション欄に入力しても反映されない、ということだと認識していますが、

    スライドにマウスオーバーした際、
    半透明の背景と文字を、スライド下半分くらいに乗せたいです。

    コード編集や追加CSSも使って色々試してみたのですが、
    スライドの後ろ側に設置したのがやっとでした。

    良い方法があればご教授いただけるとありがたいです。
    よろしくお願いいたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは

    コンテンツ項目をオフにしているので、オプション欄に入力しても反映されない、ということだと認識していますが、

    こちらは、下記のような 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;
    }
    
    トピック投稿者 samesun

    (@samesun)

    ご教授くださりありがとうございます!

    いただいたコードをいったんそのままCSSに追記しました。
    リンクとキャプションの両立は叶いました!

    ただ、常にキャプションが表示されてしまっていて、CSSで背景色など変更してみても反映されませんでした。

    https://imalife-blog.com/xo-slider/
    こちらを参考にオプション欄を編集して、フォントの色とサイズを変更することはできました。
    あとは、サムネイルのサイズが220px*147pxと小さくて、ナビゲーションの領域までキャプション表示に使えると嬉しいのですが可能でしょうか?

    サンプルの CSS は、「オプション」の「タイトル」ではなく、「コンテンツ」が対象です。コンテンツに文字を入力してみてください。

    ナビゲーションの領域までキャプション表示に使えると嬉しいのですが可能でしょうか?

    「コンテンツ」はナビゲーション領域が含まれます。

    トピック投稿者 samesun

    (@samesun)

    ありがとうございます。
    コンテンツに入力しても変わらなかったので、タイトルも編集してみた次第でした…。

    ishitaka

    (@ishitaka)

    すみません。先のサンプルは 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;
    }
    
    トピック投稿者 samesun

    (@samesun)

    ありがとうございます!
    テンプレートはDefaultを使っていたのですが、新しく教えていただいたCSS切り替えたらできました…!

    助かりました…!

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。