土屋鞄のサイトみたいにインスタグラムの投稿内容をサイト内でSlickで両端をチラ見せして、スマホ時とPC時で表示を切り分けたいとき

タイトルのまんまです笑。

上記サイトの、インスタグラムの部分みたいな実装が出来ます。
(土屋鞄さんとは、実際の実装方法は異なりますが!!)

やりたいこととしては
・インスタの投稿内容を呼び出したい
・投稿内容をスライダーで表示したい
・両端をチラ見せしたい
・PCからの表示は5枚、スマホからは3枚表示させたい
・PCの時は、オンマウス時にコメントを表示したい
といったところです。

ネックになる部分は
・instaのリスト部分が動的DOMなので、後からslickを走らせないと動かない
・スマホ時とPC時で、slickのslidesToShowを切り分けたい
ってところでしょうか。

インスタグラムの呼び出し方法、新APIの取得方法は

上記などをご確認ください。
インスタグラムの呼び出しは出来ている前提で、下記をお試しください~

See the Pen
GRJKGbp
by 伊藤 慎 (@mako110)
on CodePen.

slick.jsとcssは読み込んでおいてくださいね。

それでは。

役に立った 1

役に立ったボタン設置してみました。是非押していってくださいm(__)m(2020年4月17日設置)

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。