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

[ashmari]

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

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

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

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

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

[st_mh · Accepted solution]

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。環境に合わせて数値を調整してください。

[ashmari]

ありがとうございます！

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

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

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

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

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

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

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

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

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

[st_mh]

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

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

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

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

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

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

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

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

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

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

[ashmari]

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

大変参考になりました。

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

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