-
アイコンを並べて自動で動くウィジェットを作成したいです
トピックス by
299 pt
2023年12月19日 14:47
359
PV
キャプチャで青枠で囲んでいるアイコンを並べて自動で動くウィジェットの作成をお願いしたいです。
実際の挙動は下記URLから確認できると思います！
よろしくお願いしますｍｍ
https://every-matching.com/index.php?default=gclid_EAIaIQobChMIpvmFlNOagwMVJtdMAh2m8Ah3EAAYASAAEgILdvD_BwE.gbraid_0AAAAAo2Shg-CnVgAKliUE_hxz69s4TR3T“>みんなのマッチングアプリ (every-matching.com)
-
2 コメント
-
かしこまりました！作成開始します💫
-
Widget作成いたしました☺
—–
Widget名: 画像が自動で無限ループするカルーセル※要Javascript
カテゴリ: 自動表示
—–
[ 非表示コンテンツの編集プレビューについて ]
最も外側のHTMLにclass名「EDITABLE」を追加/削除した場合にプレビューでの表示/非表示が可能です。このWidgetでは下記HTMLの部分になります。
<div class="swiper js-infinite-loop-carousel EDITABLE"> ... </div>
[ 画像表示枚数について（ブラウザ表示）]
デフォルトでは 6枚表示となっております。
調整する場合は下記 javascript にて変更してください。
[8行目] slidesPerView: 6, //←数値を変更することで表示枚数を変更できます。
[ 画像表示枚数について（エディタでの表示）]
現在は 横に 6枚 表示する設定にしております。
エディタ編集専用の下記CSSを編集することで、エディタ上の表示枚数を変更できます。
grid-template-columns の中の下記 【6】 の数値を任意の数値にする事で横並びの画像表示を調整する事ができます。
[49行目] grid-template-columns: repeat(auto-fit, calc((100% / 6) - 10px));