FROM CACHE - jp_header

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

yuka2
観光客
11 0 0

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

 

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

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

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

 

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

5件の返信5

Qcoltd
Shopify Partner
1051 429 413

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

 

初期条件

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

Qcoltd_0-1691398850424.png

 

調整CSS

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

Qcoltd_1-1691398850415.png

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


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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
yuka2
観光客
11 0 0

ありがとうございます!

追加でご依頼可能でしょうか...?

 

yuka2_0-1691400747590.png

 

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

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

 

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

Qcoltd
Shopify Partner
1051 429 413

@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の数値を調整しご確認いただければと思います。

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
yuka2
観光客
11 0 0

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

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

 

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

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

Qcoltd
Shopify Partner
1051 429 413

@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;
}

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/