2

我有一个使用 InstafeedJS 和 SimplyScroll 的网站（此处为测试页面）——但对于我来说，我无法弄清楚为什么提要不会滚动。我是新手，请善待！

<!DOCTYPE>
<html>
<head>
  <title>Instafeed Test!</title>
  <link rel="Stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/jquery.simplyscroll.css" media="all" type="text/css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
  <script type="text/javascript">
    (function($) {
      $(function() {
        $("scroller").simplyScroll();
      });
    })(jQuery);
  </script>
  <script type="text/javascript" src="js/instafeed.min.js"></script>
  <script type="text/javascript">
    var feed = new Instafeed({
      get: 'user',
      userId: 'XXXXXXXX',
      clientId: 'XXXXXXXXXXXXXXXX',
      accessToken: 'XXXXXXXX.XXXXXX.XXXXXXXXXXXXXXXX',
      resolution: 'thumbnail',
      template: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /></a>',
      sortBy: 'most-recent',
      limit: 12,
      links: false
    });
    feed.run();
    </script>
</head>

<body>
  <div class="simply-scroll simply-scroll-container">
    <div class="simply-scroll-clip">
      <div id="instafeed" class="simply-scroll-list" style="width: 10000px;"></div>
    </div>
  </div>

</body>
</html>
4

1 回答 1

0

我已将此案例作为问题传递给InstafeedJS的一个线程。

据说该案例确实是滚动库的问题。另一件事 - jquery.simplyscroll不再受支持，并且自 2012 年以来未更新。

您最好选择一个现代且受支持的轮播库。正如所建议的那样，我找到了一种使用另一种称为slick的滚动工作的方法，如图所示。

要做到这一点，您将需要来自源的3 个文件，或者简单地分叉并使用它们，如下所示：

HTML头

<link href="slick/slick/slick.css" rel='stylesheet' type='text/css' media="screen" />
<link href="slick/slick/slick-theme.css" rel='stylesheet' type='text/css' media="screen" />
<script type="text/javascript" src="slick/slick/slick.min.js"></script>

HTML 正文

<div class="container">
    <div class="tweet_txt">
        <div id="instafeed"></div>
    </div>
    <button type="button" id="load-more">Load More</button>
</div>

CSS

.tweet_txt {
    width: 600px;
    height: 100px;
    overflow: hidden;
}

#instafeed {
    width: 1200px;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    margin-top: 20px;
    overflow: hidden;
}

#instafeed div {
    float: left;
    width: 50%;
    display: inline-block;
    margin: 0!important;
    padding: 0!important;
}

#instafeed img {
    height: 100px;
    width: 100px;
}

#instafeed .insta-likes {
    width: 100%;
    height: 100%;
    margin-top: -100%;
    opacity: 0;
    text-align: center;
    letter-spacing: 1px;
    background: rgba(255,255,255,0.4);
    position: absolute;
    text-shadow: 2px 2px 8px #fff;
    font: normal 400 11px Playfair Display,sans-serif;
    color: #0a0a0a;
    line-height: normal;
}

JS

// grab out load more button
var loadButton = document.getElementById('load-more');
//var ulfeed = document.getElementById('instafeed');
//var scroll = new simplyScroll();
var feed = new Instafeed({
    get: 'user',
    limit: 11,
    sortBy:'most-recent',
    userId: YOUR ID,
    resolution: 'standard_resolution',
    accessToken: 'YOUR TOKEN',
    template: '<div><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></a></div>',

  after: function() {

    // run slick for scrolling
    $('#instafeed').slick({
      slidesToShow: 6,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
    });

    // every time we load more, run this function
    if (!this.hasNext()) {
     // disable button if no more results to load
     loadButton.setAttribute('disabled', 'disabled');
    }
  },

  success: function() {
  //called when Instagram returns valid json data
  },
});

// bind the load more button
loadButton.addEventListener('click', function() {
  feed.next();
});

// run instafeed!
feed.run();

您可以通过代码了解结果的外观。
在讨论中有指向JSFiddle的链接以及它所在的地方。

在此处输入图像描述

于 2018-05-10T21:20:28.727 回答