-
新しいカルーセルwidjetを作成してほしい
トピックス by
350 pt
2023年10月23日 15:53
223
PV
【作成依頼】添付したリンク内の、一度に二枚表示してカルーセルで動かすことができるwidjetを作成していただきたいです。
【参考記事】https://dotgames.info/articles/sngames02?partner=smartnews&menu=infeed&account=dotgames_smartnews&cpn_g_sn=01_01_01_31&ad_g_sn=01_01_01_31_645_CIP3198_1252_Ba_0s_230224_230303&click_id=UlpSaVCoOyAA_F9HEAEA&no_link=1&no_pc=1
-
10 コメント
-
ご依頼ありがとうございます！
動かし方についてですが、2枚同時に動くイメージでしょうか？それとも1枚ずつでしょうか？
-
2枚同時に動くイメージです！
-
かしこまりました💪
-
-
確認した所、既存のWidgetの修正で実現できました💫
ご確認お願いします！
Widget：カルーセル※要javascript(アクション)
修正箇所
【変更前】
slidesPerView: 1, // 一度に表示する画像の枚数
spaceBetween: 30, // 画像同士の間隔をpxで指定
centeredSlides: true, // スライドを真ん中表示【変更後】
slidesPerView: 2, // 一度に表示する画像の枚数
slidesPerGroup: 2, // 一度に動かす画像の個数
spaceBetween: 30, // 画像同士の間隔をpxで指定
centeredSlides: false, // スライドを真ん中表示-
ありがとうございます！
追加で、カルーセルの矢印のサイズを小さくしていただくことは可能でしょうか？
既存のサイズの1/4程度に変更したいです。
-
ありがとうございます！送っていただいたような感じのサイズ感合ってます！
-
よかったです！
CSSの「.swiper-button-next, .swiper-button-prev」に「scale: 0.3;」を追加してください！
【変更前】
.swiper-button-next,
.swiper-button-prev {
position: absolute;
/*縦方向の位置（上起点）*/
top: 50%;
cursor: pointer;
}【変更後】
.swiper-button-next,
.swiper-button-prev {
position: absolute;
/*縦方向の位置（上起点）*/
top: 50%;
cursor: pointer;
scale: 0.3;
} -
解決しました！
ありがとうございました！
-
よかったです〜🙌
また何かありましたらご相談ください！！！
-
