인스타그램을 가져와서 슬라이드로 하려는데 도와주세요 ㅠㅠ
본문
안녕하세요 인스타그램을 가져와서 홈페이지에 뿌려주는데까지는 성공을했는데요
<div id="instaPics"></div>
<script type="text/javascript">
$(function(){
var tocken = "5444233121.6219099.c1988e8466064ab996cc2d1469df3a14"; /* Access Tocken 입력 */
var count = "16";
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/self/media/recent/?access_token=" + tocken + "&count=" + count,
//resolution : "standard_resolution",
success: function(response) {
if ( response.data.length > 0 ) {
for(var i = 0; i < response.data.length; i++) {
var insta = '<div class="insta-box">';
insta += "<a target='_blank' href='" + response.data[i].link + "'>";
insta += "<div class'image-layer'>";
insta += '<img src="' + response.data[i].images.thumbnail.url + '" style="width:100%">';
insta += "</div>";
if ( response.data[i].caption !== null ) {
insta += "<div class='caption-layer'>";
if ( response.data[i].caption.text.length > 0 ) {
insta += "<p class='insta-caption'>" + response.data[i].caption.text + "</p>"
}
insta += "<span class='insta-likes'>" + response.data[i].likes.count + "Like</span>";
insta += "</div>";
}
insta += "</a>";
insta += "</div>";
$("#instaPics").append(insta);
}
}
$(".insta-box").hover(function(){
$(this).find(".caption-layer").css({"backbround" : "rgba(255,255,255,0.7)", "display":"block"});
}, function(){
$(this).find(".caption-layer").css({"display":"none"});
});
}
});
});
</script>
이렇게 가져온것을
owl.carousel 슬라이드로 표현하고싶은데
슬라이드의 소스는
<section id="idx_content" class="idx_section">
<div class="content_box">
<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>
<div id="bottom_bn" class="swipe masonry">
<div class="bottom_img">
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<div class="item">
<a href="#" target="_blank"><img src="#" width="154" alt=""></a>
</div>
<script>
$(document).ready(function() {
$(".bottom_img").owlCarousel({
autoPlay : true,
loop:true,
navigation : true,
itemsCustom : [
[0, 2],
[400, 3],
[678, 4],
[990, 5],
[1200, 5]
]
});
});
</script>
</div>
</div>
</div>
</section>
이렇게 하니깐 잘되는데요
저기 인스타를 불러와서 슬라이드로 하고싶은데
너무 자바스크립트가 어렵네요 ㅠㅠ
조금만 도와주세요 고수님들 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
