javascript - SimplyScroll不会随着InstafeedJS一起移动

我有一个使用InstafeedJS和SimplyScroll的网站（测试页here）-但对于我来说，我一生都无法弄清楚该提要为何无法滚动。
我是新手，所以要好！

<!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>

最佳答案

我将此情况作为an issue传递给InstafeedJS线程。

据说这种情况确实与滚动库有关。另一件事-jquery.simplyscroll不再受支持，自2012年以来未更新。

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

为此，您需要3个the source文件或简单的fork it文件，并按如下所示使用它们：

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;
}

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

您可以按照代码看结果的样子。
在the discussion中，有指向JSFiddle的链接，还有它在Lives中的位置。

javascript - SimplyScroll不会随着InstafeedJS一起移动-LMLPHP