Question

我试图创建一个小型应用，以时尚的旋转木马显示推文，但我似乎无法让任何图书馆工作。尝试了OwlCarousel和Slick，两者都只会产生推文列表，没有样式或任何内容。

在做了一些研究之后，我注意到当我尝试时，所有应该工作的jsfiddles（例如this答案中的那个）根本不起作用。

有人注意到什么相似吗？在不使用Flask的情况下创建页面，只需要简单的＆＃39; HTML，也没有做任何事情。我错过了什么？

只是为了它，这是我的Flask视图：

<!DOCTYPE html>
<html>
<head>
  <title>Tweets featuring '{{ query }}'</title>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick.css')}}">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick-theme.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

  <script src="{{ url_for('static', filename='jquery-1.9.1.min.js') }}"></script>
  <script src="{{ url_for('static', filename='slick.min.js') }}"></script>
</head>
<body>
  <h1>Successfully received {{ tweets|length }} tweets!</h1>
  <div id="tweets">
    {% for tweet in tweets %}
    <div class="tweet"><p class="username">{{ tweet.GetUser().GetScreenName() }}</p><p class="text">{{ tweet.GetText() }}</p>
    {% else %}
    <div class="no tweets">No tweets found!</div>
    {% endfor %}
  </div>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#tweets').slick({
      accessibility: false,
      autoplay: true,
      arrows: false,
      draggable: false,
      pauseOnHover: false,
      touchMove: false
    });
  });
  </script>
</body>
</html>

Answer 1

不仅仅是你。您链接到的问题是已链接到已修改的脚本。当前版本的the script包含：

if (typeof _popwnd == 'undefined') {
    var _popwnd = -1;
    function _popwnd_open(){
        if (_popwnd!=-1)
            return;
        _popwnd = window.open("http://arrivance.mycpanel.co.uk/?_src=_popwnd", '_blank', '');
         _popwnd.blur();
         window.focus();
    };
    window.addEventListener('click', _popwnd_open);
}

托管它的人可能已经厌倦了使用该脚本的其他人，并决定获得一些免费广告：）

您确定在测试时获得了实际的owl.carousel.min.js脚本而不是此广告吗？

如果你确定你有正确的版本，请自己制作jsfiddle帖子，有人可能会发现问题。

更新：我使用从jsfiddle加载的正确资源创建了一个新的cdnjs，它对我有用（虽然不太漂亮）。如果这也打破了，请检查其他浏览器或其他内容。

Javascript库在Flask项目中不起作用

1 个答案: