Dawnにてストアを構築しております。
もともとあるセクション「スライドショー」のページネーションの表示位置を
スライドの下からスライドの下部に重ねて表示させたいです。
方法をご教授頂けると幸いです。
恐れ入りますが、何卒よろしくお願いいたします。
Topic summary
Dawnテーマでスライドショーのページネーション（ドット）の表示位置を、スライド下部から画像に重ねて表示させたいという質問。
解決方法:
CSSでの追記により位置変更が可能。.slider-buttonsにposition: absoluteとtop値を設定することで実現。PC時は56rem、タブレット以下は34rem（環境に応じて調整が必要）。
追加の質問:
2枚の画像を設定した場合、画像1→2は右から左へスライドするが、画像2→1に戻る際は左から右へ逆方向にスライドする。これを右から左へ統一（ループ処理）できるか。
ループ処理について:
- Dawnのカスタマイズ設定には標準で存在しない
- JavaScriptでスライドを複製する必要があり、ページ表示速度が低下する
- 表示速度を優先する設計のため、標準では非対応
- 対応するには、ライブラリやセクションファイルの新規作成が必要だが、作業は複雑
質問者は説明を参考に検討中。
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。環境に合わせて数値を調整してください。
1 Like
ありがとうございます！
位置を移動させることが出来ました。
誠に恐縮ですが、もう１点お尋ねさせて下さい。
スライドショーに２枚の画像を設定した場合、
画像１から画像２へは画面の右から左へスライドいたしますが、
画像２から画像１へ戻るときは左から右へ逆にスライドするようになります。
これはDAWNの仕様なのでしょうか？
右から左へのスライドで画像１に戻るように設定が可能でしょうか？
お力添え頂けると幸いです。
どうぞよろしくお願いいたします。
要望の動きは、大抵「ループ」などと表記される動きのはずです。
が、カスタマイズ設定にはないようです。
このようなループ処理を実現する場合、javascript側でスライドを複製することになります。
最初と最後のスライド2つだけか、あるいは全てが対象です。
その結果、ページの表示スピードが多少遅くなってしまいます。
そのため、Dawnの備え付けスライドショーは、表示スピードの速さを損なわないような設計といえます。
一応、スライドショーのライブラリを用意し、セクションファイルを新規で用意したり、それでいてカスタマイズ画面から登録できるようセクションスキーマを用意できれば、ループ処理対応のスライドショーを自前で用意できるでしょう。
上記は不慣れな場合、工数が複雑です。
ページの表示スピードを優先するなら、ここまでしなくても良いかと思います。
私の運営するショップでは、後者を適用していたものの、スピードが犠牲になりすぎたため前者のDawn形式のスライドショーを選択しています。
丁寧にご説明頂きましてありがとうございます。
大変参考になりました。
調べながら試してみます。
ありがとうございました。