SimplyScroll不會隨着InstafeedJS一起移動

Question

我有一個使用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>

Answer 1

我已經將此問題作為問題傳遞給InstafeedJS線程。

據說這種情況確實與滾動庫有關。 另一件事-不再支持jquery.simplyscroll，並且自2012年以來未進行更新。

您最好選擇一個現代且受支持的輪播庫。 正如建議的那樣，我找到了一種使用另一種稱為“ 滑動”的滾動方式進行工作的方法，如圖所示。

為此，您將需要源代碼中的 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而且它的地方住。

SimplyScroll不會隨着InstafeedJS一起移動

問題描述

1 個解決方案

解決方案1
0 2018-05-10 21:20:28

SimplyScroll不會隨着InstafeedJS一起移動

問題描述

1 個解決方案

解決方案1 0 2018-05-10 21:20:28

解決方案1
0 2018-05-10 21:20:28