質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.34%

  • JavaScript

    11222questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    4898questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Instagram API

    25questions

slickについて教えて下さい。

受付中

回答 1

投稿 2017/11/29 15:05 ・編集 2017/11/29 16:32

  • 評価
  • クリップ 0
  • VIEW 228

lingwood

score 17

前提・実現したいこと

お世話になります。
再度の質問になります。

Instafeedとslickを使ってInstagramのスライダーに
挑戦しています。

プラグインは、以下のものを使いたいです。
Instagramの画像取得 Instafeed.js
スライダー      slick.js

■実現したいこと
こちらのサイトにあるInstagramの部分に近いものを作りたいです。
http://beyondarchitecture.jp/news/

■参考にしたサイト
https://idotdesign.net/blog/web/js/instafeed/ (主にインスタ登録の仕方)
https://www.nxsw.co.jp/articles/2015/jquery-instagram-feed.html
http://thenorthernfoundry.com/slick-slider-with-instagram-feed/

発生している問題

フィードは取得できているようで、テスト的に投稿した5枚ほどの画像は
表示されるのですが、スライダーが動きません。
他の箇所にもslickスライダーを設置していて、そちらは正常に
動いています。

該当のソースコード

【HTML】
<div id="instagram">
<div id="slideIg">
<ul id="instafeed" class="slide"></ul>
</div><!-- /.slideIg -->
</div><!-- /#instagram -->

【JS】
 $(function(){
//インスタグラム
    var feed = new Instafeed({
        get: 'user', //ハッシュタグから取得
          userId: userID, //ユーザーIDを指定
        accessToken: 'アクセストークン', //アクセストークンを指定
        sortBy:'random', //並び順をランダムに
        links: true , //画像リンク取得
        limit: 20, //取得する画像数を設定
        resolution: 'low_resolution', //画像サイズを設定
        template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a></li>',
        clientId: 'クライアントID' //Instagram DevelopersのクライアントID
    });
    feed.run();
  $('#slideIg ul').slick({
        arrows            : false,
        autoplay        : true,
        autoplaySpeed    : 0,
        cssEase            : 'linear',
        speed            : 5000,
        rows            : 2,
        slidesToShow    : 4,
        slidesToScroll    : 1
  });
});

解決したい課題

フィードは取得できているようなので、スリックがうまく動くようにしたいです。
上記 $('#slideIg ul').slick({につきましては、参考サイト(https://www.nxsw.co.jp/articles/2015/jquery-instagram-feed.html)で紹介されていたjQuery simplyScrollをslickに置き換えてみました。

コンソールで見ると読み込んではいるようですが、
intasfeedプラグインのオプション指定ヶ所、
template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a></li>'
を付与しているところがダメなのでしょうか?

simplyScrollは古いようなので、できればslickで実現したいと思っています。
おかしい箇所等がありましたら何なりご指摘いただけませんでしょうか。

時間もなく、とても困っております。

申し訳ございませんが、ご教授いただけますよう、
何卒よろしくお願い申し上げます。

検証

T_sa 様
ありがとうございます。以下のように試行いたしました。
Instagramには登録してある5枚の画像が
320px × 240pxの大きさで縦一列に出力されました。
・横に一列になりません。
また、以下の通りrowsを2にしてあります。

いろいろ考えていただき、
誠にありがとうございます。

【HTML】
<div id="slideIg">
<ul id="instafeed" class="slide"></ul>
</div>

【JS】
//インスタグラム
    var feed = new Instafeed({
        get: 'user', //ハッシュタグから取得
          userId: *******, //ユーザーIDを指定
        accessToken: '*********', //アクセストークンを指定
        sortBy:'random', //並び順をランダムに
        links: true , //画像リンク取得
        limit: 20, //取得する画像数を設定
        resolution: 'low_resolution', //画像サイズを設定
        template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a></li>'
    });
    feed.run();
  $('#slideIg ul').slick({
        slick            : '<li>',
        arrows            : false,
        autoplay        : true,
        autoplaySpeed    : 0,
        cssEase            : 'linear',
        speed            : 5000,
        rows            : 2,
        slidesToShow    : 4,
        slidesToScroll    : 1
  });


上記、間違っておりますでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

$('#slidelg ul').slick({
    slick: '<li>'
});


上記のようにスライドする要素の指定をしてみてはどうでしょう?

投稿 2017/11/29 15:59

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/29 16:34

    T_sa 様
    ご回答誠にありがとうございます。
    とても困っており、少しでも情報をいただけますととても助かります。
    検証結果ですが、変化がありませんでした。内容は編集で本文に追加しております。
    引き続きご検討いただけますでしょうか?
    何卒よろしくお願い致します。

    キャンセル

  • 2017/11/29 16:42 編集

    slickのページを見る限り、rowを指定している際にはslidesParRowを使用するようなのでそちらもご確認ください。また、単純にInstafeedから取得してくる前にslickが走っていないかどうか確認してみてはいかがでしょう?
    CSSがないので推測ですが、「画像が縦に並んで表示される」ということはli要素までは描画できている(instafeedには問題がない)と思いますし。

    キャンセル

  • 2017/11/29 17:10

    T_sa 様
    お世話になります。たびたびありがとうございます。
    slidsParRowを設定したのですが、変化はありませんでした。
    またランダムで画像を表示する箇所が別にあるのですが、ランダムのプログラムを
    先に読ませることがありましたので、今回もslickを先に走らせないようには注意して
    Instafeedを先に読ませています。
    またCSSにつきましてはslickでセレクタを指定するだけしかしていません。
    他の箇所もidを指定しただけでスライドしています。
    ほぼ以下のような感じです。
    <ul id="slide***">
    <li>demo</li>
    <li>demo</li>
    <li>demo</li>
    </ul>
    その他には、
    <div id="slide***">
    <li>demo</li>
    <li>demo</li>
    <li>demo</li>
    </ul>
    </div>
    こちらの場合は、jsで(#slide*** ul)と指定しています。
    私もinstafeed側ではないという気がしているのですが、
    親身ご相談に乗っていただきまして、
    本当にありがとうございます。

    キャンセル

  • 2017/11/29 17:24 編集

    あとはtypoなどないか細かく潰していくくらいしか思いつかないですね……申し訳ない。slickが当たっている場合、要素に「.slick-slider」などのclassが付与されますのでそれを参考に本当に設定が正しいのかどうか(slickが適応されているかどうか)を開発者ツールなどで確認していくと良いかと思います。
    オプションについても autoplaySpeed: 0 など多少気になる箇所がありますので、思い切って不要な部分は削ってしまい、デフォルト設定で動くことを確認してから足していく形にしてみると良いのではないでしょうか。

    キャンセル

  • 2017/11/29 17:36

    T_sa 様
    こちらこそ貴重なお時間をいただき本当にありがとうございました。
    別の箇所で使っている設定と同じになっておりまして、
    スライドしても止まらずジ~っと流れていく感じ(分かりますでしょうか・・・汗)
    になっています。
    実はそれも行いまして何もない状態で動作確認した後にinstafeedをくっつけたんです。
    引き続き頑張ります!

    本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.34%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11222questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    4898questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Instagram API

    25questions