###前提・実現したいこと
お世話になります。
再度の質問になります。
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 });
上記、間違っておりますでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/29 07:34
2017/11/29 07:42 編集
2017/11/29 08:10
2017/11/29 08:24 編集
2017/11/29 08:36