スライドショー ページネーションの位置とデザインをシンプルなものに変えたい

日本語 ディスカッション 技術的なQ＆A
1

DawnにてLPを構築しております。

表示位置を変更するところまでは他の質問で見つけたのですが、もともと入っているデザインの変更方法がわかりません。

CSSがわからず、コピペ可能なものが欲しいです。

希望としては、もともとある停止ボタンや枠がないものと、●や数字ではなく、横線で見せたいと思っております。

大変恐れ入りますが、ご確認の程宜しくお願い致します。

2

ご質問いただいている、スライドショーのページネーションの形や停止ボタンの非表示にする件ですが、cssを調整することで対応は可能です。
Dawn 11.0.0を元に説明させていただきます。

初期条件

スライドショーのページネーションのスタイルは「ドット」を選択、スライドの自動切り替えはチェックがついた状態

Qcoltd_0-1691398850424.png
Qcoltd_0-1691398850424.png1600×826 191 KB

調整CSS

カスタムCSSに下記CSSを追加いただくと、ドットが横長の長方形・停止ボタンと左側の線が非表示となります。
ドットの横長の長方形については良きサイズに調整いただければと思います。

Qcoltd_1-1691398850415.png
Qcoltd_1-1691398850415.png1600×826 172 KB

.slider-counter__link--dots .dot {
  width: 3rem;
  height: 0.4rem;
  border-radius: 0;
}
.slideshow__autoplay {
  display: none;
}

ご参考まで。
(キュー小坂)

1 Like
3

ありがとうございます！

追加でご依頼可能でしょうか…？

yuka2_0-1691400747590.png

再度の矢印も消したいのですが可能でしょうか？

また、モバイルで確認した場合ページネーションの存在感が大きく、もう少し小さく繊細にしたいのですがそちらも併せてご確認頂きたいです。

大変恐れ入りますがどうぞ宜しくお願い致します。

4

@yuka2

スマホ用とPC用に分け、左右のナビゲーションを非表示にした、調整版のCSSを記載させていただきます。

.slider-counter__link--dots .dot {
  /*スマホ用サイズ*/
  width: 2rem;
  height: 0.2rem;
  border-radius: 0;
}
@media screen and (min-width: 750px) {
  .slider-counter__link--dots .dot {
    /*PC用サイズ*/
    width: 3rem;
    height: 0.4rem;
  }
}
.slideshow__autoplay,
.slider-button--next,
.slider-button--prev {
  display: none;
}

細かな調整につきましては、widthとheightの数値を調整しご確認いただければと思います。

ご参考まで。
(キュー小坂)

1 Like
5

ありがとうございます！！

イメージに近づきました！

重ねて申し訳ございません。

ページネーションの周りに薄い色の線の枠があると思うのですが、こちらの削除は可能でしょうか？

6

@yuka2

実際の画面を見れておりませんので、推測となりますがCSSでborderを非表示にすれば良いと思いますので、下記CSSで試していただければとお思います。

.slider-counter__link--dots .dot {
  /*スマホ用サイズ*/
  width: 2rem;
  height: 0.2rem;
  border-radius: 0;
  border:none;
}
@media screen and (min-width: 750px) {
  .slider-counter__link--dots .dot {
    /*PC用サイズ*/
    width: 3rem;
    height: 0.4rem;
  }
}
.slideshow__autoplay,
.slider-button--next,
.slider-button--prev {
  display: none;
}

ご参考まで。
(キュー小坂)

1 Like