サポート » インストール » habakiriテーマのスライダー(slick.js)のブレイクポイントの設定

  • いくらか自分で調べてみたもののなかなか該当する記事が見当たらず、
    困っております。

    大変恐縮ですが、ご存知の方いらっしゃいましたら、
    ご返答頂けましたら幸いです。
    何卒よろしくお願い致します。

    ———————————————————————

    habakiriテーマで現在、サイトを作成しております。
    サイト製作に関してはかなりの初心者です。

    困っているのは、スライダーに対してブレイクポイントが設定できないことです。
    habakiriはslick.jsでスライダーを組み込んでいることがわかりました。
    いくつか検索を続けていると、slick.jsを編集することで出しわけが可能になることまでは
    わかりました。(PCとSPによりコンテンツ幅にあった画像をそれぞれに出したいです)

    しかし、そもそもslick.jsのソースがどこにあるのかわからず、
    テーマエディターから探しても見当たらないです。
    (cssだけしか出ないから、jsが出てこないのは当たり前でしょうか?)

    1:デフォルトで設定されているスライダーの編集は可能でしょうか?
     それは初心者レベルでも簡単に実行できますか?

    →懸念しているのは、このslick.jsがGUIで調節できるよう組み込まれているので、
    これってもしかして、すごく複雑な階層にまで潜りこんで色々設定しなくてはいけないのか
    と思っております。もちろん、そのような知識は皆無です

    2:もし難しいようであれば、自分で新たにslick.jsなどを導入して
    自分自らで設定したほうが良いのでしょうか?

    ———————————————————————
    長々と記述しましたが、お手数ですが
    ご確認の上、何卒よろしくお願い致します。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • CG

    (@du-bist-der-lenz)

    要点は、「slick.jsのソース」を探しているということでしょうか。解体されるようなことなく、装備されているjsは、それぞれの原作に敬意が払われており。「slick.js」においても、「slick.js」ディレクトリにそのまま格納されています、こと確認しました。

    トピック投稿者 uutum

    (@uutum)

    CGさま

    ご返信ありがとうございました。
    質問する場所を間違えており「インストール」のフォーラムに質問しておりました。
    ご連絡いただきとても嬉しいです。

    要点でいいますと、slick.jsを探していました。
    昨日、子テーマからずっと探しておりましたが、子テーマにはjsがなく焦っておりました。
    (当たり前ですよね。子テーマは自分で作ったものなのに…)

    親テーマよりおかげさまでjsを確認できました。
    これを子テーマに移し替えて編集しなおせば、スライダーにブレイクポイントを設置できるでしょうか?
    デフォルトのスライダーだと縮小するにつれて見せたい画像がどんどんと切れていき困っております

    質問を質問で返信して申しわけございませんが、ご確認頂けましたら幸いです
    お忙しい中、大変恐縮ですが何卒よろしくお願い致します。

    CG

    (@du-bist-der-lenz)

    一日経っているので、もとに戻してしまいました。そのためファイル名はわかりませんが、「slick.js」を呼び出している箇所を確認すると手がかりになるでしょう。わたしなら、編集してブレイクポイントを加えるより、デヴァイスで出し分けます。ヒントになれば幸いですが、これ以上は、忙しさに甘えさせてもらいます。

    こんにちは

    habakiri の Slick は /habakiri/js/app.min.js の中にコンパクト化されて入っている様子ですので、変更することは難しいですね。

    しかし、変更すべきは slick.js そのものなんでしょうか?

    トピック投稿者 uutum

    (@uutum)

    >>CGさま
    お忙しい中、度々ご返信いただきありがとうございました!
    <デヴァイスで出し分けます。>←これがブレイクポイントの設定という解釈でいました。
    ヒントありがとうございます。再度模索してみたいと思います!
    本当にありがとうございました

    >>munyagyさま
    habakiri の Slick は /habakiri/js/app.min.js の中にコンパクト化されて入っている様子ですので、変更することは難しいですね。

    →やはり簡易的にソースをいじってということは難しいということですね
    ご確認、ご返答ありがとうございます

    しかし、変更すべきは slick.js そのものなんでしょうか?

    →これどういうことでしょうか?
    いま考えているのは、habakiriにデフォルトで実装されているスライダーを諦めて
    新たに自分でslickを入れてスライダーを製作するということを考えていました。
    初心者なので実現できるかはわかりませんが…もし他にいいアイデアをお持ちであれば
    ご教示いただけませんでしょうか?
    お手数ですが何卒よろしくお願い致します

    slick を使いつつ、slick.js を変更しないやり方は2つあると思います。
    (どのようにしたいか、という意図を正確に理解できているかという点でちょっと自信が無いですが)

    1)
    slick で2つのスライダー(PC用とSP用)を生成し、CSS のメディアクエリで表示/非表示を切り替える。

    2)
    slick のフィルタ機能を使って、画面サイズによって表示するスライドを動的に変更する。
    参考)https://kenwheeler.github.io/slick/ の Filtering の項目をご確認ください。
    この場合にちょっと面倒なのが、リサイズされた時に、画面サイズがブレイクポイントを跨いだときに、 slick を初期化しなおしてやる必要があることでしょうか。

    トピック投稿者 uutum

    (@uutum)

    munyaguさま

    返信が遅れてしまい申し訳ございません。

    2つの方法をご教示いただきありがとうございます。
    ちょっと色々と勉強不足のところもあり、そもそもメディアクエリ設定方法とは?
    とかそういう部分から改めて勉強しなくてはいけないなと考えております!

    とりあえず、再度お教えいただいた対応方法を参考にググりながら
    試行錯誤してみます。

    ありがとうございます

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「habakiriテーマのスライダー(slick.js)のブレイクポイントの設定」には新たに返信することはできません。