Instagram 提要 + Slick Carousel

Question

我正在尝试运行 Instafeed with Slick Slider。 Instafeed 运行良好，正在加载 instagram 图片，但不会在 Slick Slider 上输出图片。

JS 有问题：

JS:

$(document).ready(function () {
  $('.instagram_feed').slick({
    dots: false,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    arrows: true,
    adaptiveHeight: true,
    autoplay: true,
    responsive: [{
        breakpoint: 700,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      }
    ]
  });
});

$.ajax({
  type: 'get',
  dataType: 'json',
  url: 'https://ig.instant-tokens.com/users/c9f71acf-40dc-4ce8-bfba-ac7d782a9315/instagram/17841415198859292/token?userSecret=1bwmzhdbracm01k4ba84g8',

  success: function (response) {
    var feed = new Instafeed({
      target: 'instafeed',
      accessToken: response.Token, // Access token from json response
      template: '<div><a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></div></div>',
    });
    feed.run();
  },
});

代码笔：https://codepen.io/adrianovarlotta/pen/JjWBRbz

但 Instagram 拒绝在 Codepen 上显示图片，因此您可以在 Instagram 图片页面底部看到实时网站 here

Answer 1

slick() 调用在 Instafeed 完成图像渲染之前触发。尝试将其移动到 Instafeed 构造函数中的 after 方法。像这样：

$.ajax({
    type: 'get',
    dataType: 'json',
    url: 'https://ig.instant-tokens.com/users/c9f71acf-40dc-4ce8-bfba-ac7d782a9315/instagram/17841415198859292/token?userSecret=1bwmzhdbracm01k4ba84g8',

    success: function(response) {
        var feed = new Instafeed({
            target: 'instafeed',
            accessToken: response.Token, // Access token from json response
            template: '<div><a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></div></div>',
            after: function() {
                $('.instagram_feed').slick({
                    dots: false,
                    infinite: true,
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    arrows: true,
                    adaptiveHeight: true,
                    autoplay: true,
                    responsive: [{
                            breakpoint: 700,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2,
                            }
                        },
                        {
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3
                            }
                        }
                    ]
                });
            }
        });
        feed.run();
    },
});

根据 Instafeed documentation:

after: A callback function called when images have been added to the page.

Instagram 提要 + Slick Carousel

Instagram feed + Slick Carousel

javascript

jquery

slider

carousel

instafeedjs