I am currently trying to build an image carousel (using Owl Carousel) that dynamically pulls in Instagram photos (using Instafeed.js). I'm using Owl Carousel v2 in conjunction with some custom scripts to have my images split into two horizontal rows, like a grid. I also have my Instafeed.js set up properly to pull in images based on the tag name.
I'm having some trouble syncing these two plugins so that my Owl Carousel pulls in the images from my Instafeed.js feed.
For display purposes, I have separated the carousel and Instagram feed divs so that you can see them both working as individual plugins (please note that for the Instagram images to show up you must enter your own client id).
HTML:
<section id="demos">
<div class="row">
<div id="owl2row-plugin" class="owl-carousel"></div>
</div>
</section>
<div id="instafeed"></div>
JS:
$(function () {
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR CLIENT ID',
limit: 25,
template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"/></a></div>',
before: function () {
for (var i = 0; i < 24; i++) {
$newdiv = $('<div class="item"></div>').html('<img src="http://placehold.it/200x200">');
$('#owl2row-plugin').append($newdiv);
}
var owl = $('#owl2row-plugin');
owl.owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
owl2row: 'true',
owl2rowTarget: 'item',
owl2rowContainer: 'owl2row-item',
owl2rowDirection: 'utd',
responsive: {
0: {
items: 2
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
}
});
feed.run();
});
For those of you that are familiar with Instafeed.js, wouldn't it make sense to add:
target: 'owl2row-plugin',
So that the photos get injected into my carousel? I've noticed that doing this only breaks the carousel :/
Anything helps!
FIDDLE: http://jsfiddle.net/njacoy/zcrwvsuu/embedded/result/