carroussel
30/06/2021
0
Galera podem me ajudar?
estou tentando colocar um carrossel no meu footer com o feed do instagram, consegui fazer api porem não estou conseguindo colocar um carrossel nele.
HTML
<!-- Footer Main -->
<footer class="container-fluid no-left-padding no-right-padding footer-main footer-section1 footer-dark">
<!-- Instagram -->
<div class="container-fluid no-left-padding no-right-padding instagram-block">
<div id="instagram-feed2"></div>
</div><!-- Instagram /- -->
------------quero que o efeito seja igual ao de baixo--------
<!-- Instagram -->
<div class="container-fluid no-left-padding no-right-padding instagram-block">
<ul class="instagram-carousel">
<li><a href="#"><img src="http://placehold.it/319x319/aaa" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319/aaa" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319/aaa" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319" alt="Instagram" /></a></li>
</ul>
</div><!-- Instagram /- -->
codigo da api em JS
if ( $(''''#instagram-feed2'''').length != 0 ) {
var token = ''''IGQVJXWV9MVm5wWEQzVFV5Q3g5bjk4RVNFR2VTTk5xZAzZADZADItdHNTRmFwcVBZAQmZAFYTBXNGNKV3RFSTFRZAWtEUzJVQy1DU1Rndlp6WFFhNks3Wm5JTldEWk1tQVpOckZADVDZAlV250YWVHdGlla01sQQZDZD'''';
var fields = ''''id,media_type,media_url,thumbnail_url,timestamp,permalink,caption'''';
var limit = 6; // Set a number of display items
$.ajax ( {
url: ''''https://graph.instagram.com/me/media?fields=''''+ fields +''''&access_token=''''+ token +''''&limit=''''+ limit,
type: ''''GET'''',
success: function( response ) {
for( var x in response.data ) {
var link = response.data[x][''''permalink''''],
caption = response.data[x][''''caption''''],
image = response.data[x][''''media_url''''],
image_video = response.data[x][''''thumbnail_url''''],
html = '''''''';
if ( response.data[x][''''media_type''''] == ''''VIDEO'''' ) {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image_video + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
} else {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
}
$(''''#instagram-feed2'''').append(html);
}
},
error: function(data) {
var html = ''''<div class="class-no-data">No Images Found</div>'''';
$(''''#instagram-feed2'''').append(html);
}
});
}
estou tentando colocar um carrossel no meu footer com o feed do instagram, consegui fazer api porem não estou conseguindo colocar um carrossel nele.
HTML
<!-- Footer Main -->
<footer class="container-fluid no-left-padding no-right-padding footer-main footer-section1 footer-dark">
<!-- Instagram -->
<div class="container-fluid no-left-padding no-right-padding instagram-block">
<div id="instagram-feed2"></div>
</div><!-- Instagram /- -->
------------quero que o efeito seja igual ao de baixo--------
<!-- Instagram -->
<div class="container-fluid no-left-padding no-right-padding instagram-block">
<ul class="instagram-carousel">
<li><a href="#"><img src="http://placehold.it/319x319/aaa" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319/aaa" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319/aaa" alt="Instagram" /></a></li>
<li><a href="#"><img src="http://placehold.it/319x319" alt="Instagram" /></a></li>
</ul>
</div><!-- Instagram /- -->
codigo da api em JS
if ( $(''''#instagram-feed2'''').length != 0 ) {
var token = ''''IGQVJXWV9MVm5wWEQzVFV5Q3g5bjk4RVNFR2VTTk5xZAzZADZADItdHNTRmFwcVBZAQmZAFYTBXNGNKV3RFSTFRZAWtEUzJVQy1DU1Rndlp6WFFhNks3Wm5JTldEWk1tQVpOckZADVDZAlV250YWVHdGlla01sQQZDZD'''';
var fields = ''''id,media_type,media_url,thumbnail_url,timestamp,permalink,caption'''';
var limit = 6; // Set a number of display items
$.ajax ( {
url: ''''https://graph.instagram.com/me/media?fields=''''+ fields +''''&access_token=''''+ token +''''&limit=''''+ limit,
type: ''''GET'''',
success: function( response ) {
for( var x in response.data ) {
var link = response.data[x][''''permalink''''],
caption = response.data[x][''''caption''''],
image = response.data[x][''''media_url''''],
image_video = response.data[x][''''thumbnail_url''''],
html = '''''''';
if ( response.data[x][''''media_type''''] == ''''VIDEO'''' ) {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image_video + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
} else {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
}
$(''''#instagram-feed2'''').append(html);
}
},
error: function(data) {
var html = ''''<div class="class-no-data">No Images Found</div>'''';
$(''''#instagram-feed2'''').append(html);
}
});
}
Luiz Antonio
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)