微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决为什么我的 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 属性。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。