WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ アイコンを並べて自動で動くウィジェットを作成したいです 返信先:アイコンを並べて自動で動くウィジェットを作成したいです

  • widgetマスター

    モデレータ
    2023年12月19日 19:54

    Widget作成いたしました☺

    —–

    Widget名: 画像が自動で無限ループするカルーセル※要Javascript

    カテゴリ: 自動表示

    設置例: https://sb-draft-preview.squadbeyond.com/articles/UqToDrDagGTqMuceqJwQ/draft?token=232bff92e4b82ff086771f099b95dc65

    —–

    [ 非表示コンテンツの編集プレビューについて ]

    最も外側の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));