FROM CACHE - jp_header
解決済

Dawn スライドショー ページネーションの位置を変えたい

ashmari
観光客
15 0 1

Dawnにてストアを構築しております。

 

もともとあるセクション「スライドショー」のページネーションの表示位置を

スライドの下からスライドの下部に重ねて表示させたいです。

方法をご教授頂けると幸いです。

恐れ入りますが、何卒よろしくお願いいたします。

2023-06-15.jpg

1 件の受理された解決策

st_mh
探検家
40 13 11

成功

cssでの追記が良いでしょう。

.slider-buttons {
  position: absolute;
  top: calc(56rem - 4.5rem);
  left: 0;
  width: 100%;
  border; none;
}
@media screen and (max-width: 1140px) {
  .slider-buttons {
    top: calc(34rem - 4.5rem);
  }
}

スライドショーのカスタムCSSに上記を追記します。

※最新のdownだけなのか分かりませんが、上下にボーダーが表示されるので、border: none;で線を非表示にしています。

※位置については、初期設定の高さにしています。初期設定だとPC時は56rem、タブレット以下は34rem。環境に合わせて数値を調整してください。

st_mh_0-1686808358888.png

 

元の投稿で解決策を見る

4件の返信4

st_mh
探検家
40 13 11

成功

cssでの追記が良いでしょう。

.slider-buttons {
  position: absolute;
  top: calc(56rem - 4.5rem);
  left: 0;
  width: 100%;
  border; none;
}
@media screen and (max-width: 1140px) {
  .slider-buttons {
    top: calc(34rem - 4.5rem);
  }
}

スライドショーのカスタムCSSに上記を追記します。

※最新のdownだけなのか分かりませんが、上下にボーダーが表示されるので、border: none;で線を非表示にしています。

※位置については、初期設定の高さにしています。初期設定だとPC時は56rem、タブレット以下は34rem。環境に合わせて数値を調整してください。

st_mh_0-1686808358888.png

 

ashmari
観光客
15 0 1

ありがとうございます!

位置を移動させることが出来ました。

誠に恐縮ですが、もう1点お尋ねさせて下さい。

スライドショーに2枚の画像を設定した場合、

画像1から画像2へは画面の右から左へスライドいたしますが、

画像2から画像1へ戻るときは左から右へ逆にスライドするようになります。

これはDAWNの仕様なのでしょうか?

右から左へのスライドで画像1に戻るように設定が可能でしょうか?

お力添え頂けると幸いです。

どうぞよろしくお願いいたします。

st_mh
探検家
40 13 11

要望の動きは、大抵「ループ」などと表記される動きのはずです。

が、カスタマイズ設定にはないようです

st_mh_0-1686819824942.png

このようなループ処理を実現する場合、javascript側でスライドを複製することになります。

最初と最後のスライド2つだけか、あるいは全てが対象です。

その結果、ページの表示スピードが多少遅くなってしまいます。

 

そのため、Dawnの備え付けスライドショーは、表示スピードの速さを損なわないような設計といえます。

 

一応、スライドショーのライブラリを用意し、セクションファイルを新規で用意したり、それでいてカスタマイズ画面から登録できるようセクションスキーマを用意できれば、ループ処理対応のスライドショーを自前で用意できるでしょう。

上記は不慣れな場合、工数が複雑です。

ページの表示スピードを優先するなら、ここまでしなくても良いかと思います。

 

私の運営するショップでは、後者を適用していたものの、スピードが犠牲になりすぎたため前者のDawn形式のスライドショーを選択しています。

ashmari
観光客
15 0 1

丁寧にご説明頂きましてありがとうございます。

大変参考になりました。

調べながら試してみます。

ありがとうございました。