javascript - 使用从 Instafeed.js 中提取的照片构建 Owl Carousel

Question

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

我在同步这两个插件时遇到一些问题，因此我的 Owl Carousel 无法从 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',

这样照片就会被注入(inject)到我的轮播中？我注意到这样做只会破坏轮播:/

一切都有帮助!

fiddle :http://jsfiddle.net/njacoy/zcrwvsuu/embedded/result/

Answer 1

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();

    });