Feedでカルーセルスライダーを実装してみよう。Feedでカルーセルスライダーを実装してみよう。SatoInstagramで投稿した画像をwebサイトに表示したい。そんな時、自分でやると難度も手間も結構高い。簡単な設定でインスタグラムの写真をWebサイトに表示できるかなり便利なプラグインです。使っている方も多いのではないでしょうか?今日はこちらのプラグインを使って、カルーセルスライダーを作っていこうと思います。Feed」を利用している人向けの内容となります。今回は、トワニーティエル様で実装しているようなくるくる回る感じのスライダーを作っていきます。有料版にはデフォルトでカルーセル表示が用意されています。現在(ver4.1.3)では設定できる項目が少ない、スライダーが止まる不具合がある。いった感じで正直、今後に期待しましょう状態です。「Grid」の表示を利用して自分で作っちゃいましょー!もちろん無料版でもOKですよ。Feed」での設定です。Photos:好きな数、スマホとは数字を合わせる。layout」にチェックを入れましょう。PhotosはPCとスマホを合わせなくても可能ですが、ここの数字が違うと、PCとスマホでスライダーのスピードが変わってしまいます。Feed」内で自由に設定してください。Feed」のショートコードを必ず何かで囲うようにすればOKです。[instagram-feed]</div>3次はjQueryスライダー部分には、みんな大好きbx-sliderを使っていきます。事前にbx-sliderを読み込んでおきましょう。※今回bx-sliderのcssは使用しないので読み込みません。読み込みたい場合は後述するcssの記述をbxのcssに合わせて調整してください。speed:180000,//時間の設定、本来なら1000=1秒ですが、今回は読み込む枚数設定にも合わせて感覚で設定する必要があります。},10);}書いてある内容は単純にインスタの投稿内容を読み込んだらカルーセルスライダーを実装するというシンプルなものです。/////追記:2019.08.27※ver5.0(pro版)以降は「setInterval」の処理はなくても問題ないです。speed:180000,//時間の設定、本来なら1000=1秒ですが、今回は読み込む枚数設定にも合わせて感覚で設定する必要があります。AJAX./////4最後にCSSの設定です。※sassで記述しています。}}/*@mediaの数値やその中のサイズ設定は基本サイズやホームページの基本サイズに合わせてお好みで調整してください。*/以上で設定完了です。あとはホームページに合わせてサイズを調整しましょう。追記:2019.08.27・バージョン5.0、及び5.0未満に対応するようjavascriptを修正しました。フロントエンドエンジニア。