I am trying to get carousel using owl-carousel which is working fine for some module but,i am trying to get instagram post giving limit to use carousel but its not working Below is my code.
Script.min.js
var feed = new Instafeed({
get: 'user',
limit: 4,
accessToken: "XXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXX",
userId: XXXXXX,
target: "homeInstagramWrapper",
filter: function(image) {
image.timeAgoInWords = moment(image.created_time * 1000).fromNow();
return image;
},
template: '<div class="owl-carousel" id="owl-inspirations"><a class="instagram-image" href="{{link}}" target="_blank"><img src="{{model.images.low_resolution.url}}" /></a></div>'
} );
feed.run();
My another code :
LandingPage.php
<div class="instagram-wrapper track-all-links" data-sm-network="instagram">
<h3><i class="bits-sm-icon-instagram-black"></i> Instagram <a href="https://instagram.com/XXXXX" target="_blank" class="text-gray">XXX</a></h3>
<div id="homeInstagramWrapper">
</div>
</div>
<script>
jQuery(document).ready(function($){
jQuery("#owl-inspirations").owlCarousel({
items : 2,
lazyLoad : true,
navigation : true,
pagination : false,
navigationText: [
'<button type="button" data-role="none" class="slick-prev" id="left-button">Previous</button>',
'<button type="button" data-role="none" class="slick-next" id="right-button">Next</button>'
],
});
});
</script>
Using id 'owl-inspiration' is not able to call jquery in landing page from script.min.js.Is there any solution for this issue.
Any help will be appreciated. thanks