文章/答案/技术大牛

发布

社区首页 >问答首页 >SimplyScroll不会随InstafeedJS一起移动

问SimplyScroll不会随InstafeedJS一起移动
EN

Stack Overflow用户

提问于 2017-10-12 18:26:37

回答 1查看 185关注 0票数 2

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

javascript

jquery

instafeedjs

simplyscroll

回答 1

Stack Overflow用户

发布于 2018-05-11 05:20:29

我已经将这个案例作为传递给了的一个线程。

有声明说，这种情况实际上是滚动库的问题。还有一件事- 不再受支持，而且自2012年以来就没有更新过。

您最好选择一个现代的、受支持的carousel库。按照建议，我找到了一种使用另一个名为的滚动工具来制作滚动作品的方法，如图所示。

要做到这一点，你需要中的3文件或简单的，并像下面这样使用它们：

HTML Head

<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的链接，也有它的位置。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46707274

复制

相似问题

问SimplyScroll不会随InstafeedJS一起移动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SimplyScroll不会随InstafeedJS一起移动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SimplyScroll不会随InstafeedJS一起移动
EN