Why is my Slick-Slider carousel not working Django?

Viewed 452

I have seen several other posts with issues to get it working but none of them provided a solution for me.

The slick-slider folder is in my static file and is successfully being read but nothing at all is happening to my HTML.

I appreciate the help :)

    {% 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 %}
1 Answers

A link element will not execute a script file that has been linked to the page.

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

If you instead load the file using a script tag, the script will also be executed when loaded.

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

*notice also that with the script tag you set the file path in the src attribute, and not the href attribute.

Related