ピックアップスライダーで複数のスライダーを並べたい

0
Who liked: No user
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #127638
    山崎 大祐
    参加者
    112

    【お使いの Snow Monkey のバージョン】20.4.2
    【お使いの Snow Monkey Blocks のバージョン】19.10.0
    【お使いのブラウザ】chrome
    【当該サイトのURL】https://yamasakidaisuke.com/6144.html

    ### 実現したいこと

    以下のサイト上部のように複数のピックアップ投稿を並べたい

    ### 発生している問題

    いつもお世話になっております。

    参考サイトのように、ピックアップスライダーを並べて表示したいです。
    知識不足でspiderのカスタマイズ方法がわかりませんでした。もし可能であればご教示をお願いできますでしょうか。

    ### 試したこと

    • 過去記事の検索 「spider」「コンテンツスライダー」で検索
    • ドキュメントの確認
    • コードのテスト
      CSSを追加⇒望んだ状態になりませんでした
      ‘@media (min-width: 1024px) {
      .my-slider .spider__slide {
      max-width: calc(50% – 10px);
      }
      .my-slider .spider__slide:not(:last-child) {
      margin-right: 20px;
      }
      }’
    • JSの検証 myplugin_js.jsに追記を検証しようと思いましたが、思いつきませんでした
    0
    Who liked: No user
    #127688
    アバター画像キタジマ タカシ
    参加者
    2421

    こんな感じでどうでしょう?

    .smb-spider-pickup-slider .spider__slide {
      max-width: 50%;
    }
    1
    Who liked:
    #127691
    山崎 大祐
    参加者
    112

    ありがとうございます!

    すみません、cssでは再現できないのではと思い込みで進めておりました。

    教えていただいたcssで再現できました。

    0
    Who liked: No user
    #127693
    アバター画像キタジマ タカシ
    参加者
    2421

    Spider は、枚数とかデザインの調整は全部 CSS でやりたいのにちょうど良いのが無かったので開発したライブラリなんです!ということで幅の指定も CSS でできるんです^^(というか js 側にはそのような設定が無いから CSS でやるしかない…

    1
    Who liked:
    #127780
    山崎 大祐
    参加者
    112

    spiderドキュメントを読んでそこまで読み取ることができませんでした!
    ある意味すごいと思います。cssでカスタムします!

    1
    Who liked:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「ピックアップスライダーで複数のスライダーを並べたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。