为什么我的 Slick-Slider carousel 在 Django 中不起作用？

问题描述

我已经看到其他几个帖子有问题使其正常工作，但没有一个为我提供解决方案。

slick-slider 文件夹位于我的静态文件中，并且正在成功读取，但我的 HTML 完全没有发生任何变化。

感谢您的帮助:)

    {% for game in game_lines %}
       {% if game.status == 'scheduled' or game.status == 'in progress' %}
            <div class="slick-slider">  
               <div class="col-1 text-center">
                   <p class="white">{{ game.away_abbr }}</p>
                   <p class="white">vs.</p>
                   <p class="white">{{ game.home_abbr }}</p>
               </div>
            </div>    
        {% endif %}
    {% endfor %}

    {% block postloadjs %}
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"
             type="text/javascript"> 
        </script>
        <link type="text/javascript" href="{% static 'slick/slick.min.js' %}">  
        <script type="text/javascript">
            $(document).ready(function(){
                $('.slick-slider').slick({
                    infinite: true,speed: 700,autoplay:true,autoplaySpeed: 2000,slidesToShow: 10,slidesToScroll: 1
                });
            });
        </script>
    {% endblock %}

    {% block extra_css %}
        <link rel="stylesheet" href="{% static 'slick/slick.css' %}">
        <link rel="stylesheet" href="{% static 'slick/slick-theme.css' %}"/>
    {% endblock %}

解决方法

链接元素不会执行已链接到页面的脚本文件。

<link type="text/javascript" href="{% static 'slick/slick.min.js' %}">

如果您改为使用 script 标签加载文件，脚本也会在加载时执行。

<script src="{% static 'slick/slick.min.js' %}"></script>

*另请注意，使用脚本标记，您在 src 属性中设置文件路径，而不是 href 属性。