Question

我目前正在尝试使用动态拉入Instagram照片（使用Instafeed.js）构建一个图像轮播（使用猫头鹰旋转木马）。我将Owl Carousel v2与一些自定义脚本结合使用，将我的图像分成两个水平行，如网格。我还正确设置了Instafeed.js，以根据标签名称提取图像。

我在同步这两个插件时遇到了一些麻烦，以便我的猫头鹰旋转木马从我的Instafeed.js Feed中提取图像。

出于显示目的，我已将旋转木马和Instagram Feed div分开，以便您可以看到它们都作为单独的插件工作（请注意，要显示Instagram图像，您必须输入您自己的客户端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();
});

对于那些熟悉Instafeed.js的人来说，添加它是不合理的：

target: 'owl2row-plugin',

这样照片会被注入我的旋转木马？我注意到这样做只打破了旋转木马：/

一切都有帮助！

FIDDLE：http://jsfiddle.net/njacoy/zcrwvsuu/embedded/result/

Answer 1

在 Instafeed加载图片后调用owl carousel 。

Answer 2

HTML代码

<section class="instagram container-fluid mt-md ">
    <div class="row">
            <div id="owl2row-plugin" class="owl-carousels">
                 <div id="instafeed" class="owl2row-plugin">
                 </div>
            </div>
    </div>
</section>

jQuery代码

    $(document).ready(function(){

        var feed = new Instafeed({

            //get: 'user',
            userId: 5411567,
            accessToken: '3722752.467ede5.edc5948480384f54915ea14617ce6716',
            get: 'user',
            //tagName: 'awesome',
            clientId: 'fdf210ab13ce47e48ac861bac822d1a3',
            limit: 25,


            after: function () {

                var owl = $('.owl2row-plugin');
                owl.owlCarousel({
                    loop: true,
                    margin: 0,
                    navText:['',''],
                    nav: true,
                    dots: false,
                    owl2row: 'true',
                    owl2rowTarget: 'item',
                    owl2rowContainer: 'owl2row-item',
                    owl2rowDirection: 'utd',
                    responsive: {
                        0: {
                            items: 3
                        },
                        600: {
                            items: 5
                        },
                        1000: {
                            items: 10
                        }
                    }
                });
            },
            template: '<div class="item"><a href="{{link}}" target="_blank"><span><img src="{{image}}" alt="{{caption}}"/></span></a></div>',

        });

        feed.run();

    });

使用从Instafeed.js中提取的照片构建猫头鹰旋转木马

2 个答案: