인스타그램을 가져와서 슬라이드로 하려는데 도와주세요 ㅠㅠ 채택완료

</p><p><div id="instaPics"></div></p><p>
</p><p><script type="text/javascript">  </p><p>
</p><p>$(function(){</p><p>    </p><p>        var tocken = "5444233121.6219099.c1988e8466064ab996cc2d1469df3a14"; /* Access Tocken 입력 */  </p><p>        var count = "16";  </p><p>        $.ajax({  </p><p>            type: "GET",  </p><p>            dataType: "jsonp",  </p><p>            cache: false,  </p><p>            url: "<a href="<a href="https://api.instagram.com/v1/users/self/media/recent/?access_token=" target="_blank" rel="noopener noreferrer">https://api.instagram.com/v1/users/self/media/recent/?access_token=</a>"><a href="https://api.instagram.com/v1/users/self/media/recent/?access_token=" target="_blank" rel="noopener noreferrer">https://api.instagram.com/v1/users/self/media/recent/?access_token=</a></a>" + tocken + "&count=" + count,  </p><p>            //resolution : "standard_resolution",</p><p>            success: function(response) {  </p><p>
</p><p>             if ( response.data.length > 0 ) {  </p><p>                  for(var i = 0; i < response.data.length; i++) { </p><p>                       var insta = '<div class="insta-box">';  </p><p>                       insta += "<a target='_blank' href='" + response.data[i].link + "'>";  </p><p>                       insta += "<div class'image-layer'>";  </p><p>                       insta += '<img src="' + response.data[i].images.thumbnail.url + '" style="width:100%">';  </p><p>                       insta += "</div>";  </p><p>                       if ( response.data[i].caption !== null ) {  </p><p>                            insta += "<div class='caption-layer'>";  </p><p>                            if ( response.data[i].caption.text.length > 0 ) {  </p><p>                                 insta += "<p class='insta-caption'>" + response.data[i].caption.text + "</p>"  </p><p>                            }  </p><p>                            insta += "<span class='insta-likes'>" + response.data[i].likes.count + "Like</span>";  </p><p>                            insta += "</div>";  </p><p>                       }  </p><p>                       insta += "</a>";  </p><p>                       insta += "</div>";  </p><p>                       $("#instaPics").append(insta);  </p><p>                  }  </p><p>             }  </p><p>             $(".insta-box").hover(function(){  </p><p>                  $(this).find(".caption-layer").css({"backbround" : "rgba(255,255,255,0.7)", "display":"block"});  </p><p>             }, function(){  </p><p>                  $(this).find(".caption-layer").css({"display":"none"});  </p><p>             });  </p><p>            }  </p><p>           });</p><p>    });</p><p>
</p><p></script></p><p>

</p><p><section id="idx_content" class="idx_section"></p><p>    <div class="content_box"></p><p>        <h2 class="con_tit"><i class="fa fa-angle-double-right" aria-hidden="true"></i><span> Distribution channels </span><i class="fa fa-angle-double-left" aria-hidden="true"></i></h2></p><p>
</p><p>        <div id="bottom_bn" class="swipe masonry"></p><p>            <div class="bottom_img"></p><p>
</p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>                <div class="item"></p><p>                    <a href="#" target="_blank"><img src="#" width="154" alt=""></a></p><p>                </div></p><p>
</p><p><script></p><p><span style="white-space:pre">	</span>$(document).ready(function() {</p><p><span style="white-space:pre">		</span>$(".bottom_img").owlCarousel({</p><p><span style="white-space:pre">			</span>autoPlay : true,</p><p><span style="white-space:pre">			</span>loop:true,</p><p><span style="white-space:pre">			</span>navigation : true,</p><p><span style="white-space:pre">			</span>itemsCustom : [</p><p><span style="white-space:pre">				</span>[0, 2],</p><p><span style="white-space:pre">				</span>[400, 3],</p><p><span style="white-space:pre">				</span>[678, 4],</p><p><span style="white-space:pre">				</span>[990, 5],</p><p><span style="white-space:pre">				</span>[1200, 5]</p><p><span style="white-space:pre">			</span>]</p><p><span style="white-space:pre">		</span>});</p><p><span style="white-space:pre">	</span>});</p><p></script></p><p>
</p><p>
</p><p>            </div></p><p>        </div></p><p>    </div></p><p></section></p><p>