Carousel slider not working

Using Django
1

Hey, I’m new to django and I am creating a website which shows the product images on the home webpage in the form of a Carousel slider (bootstrap 4).

{%extends 'blog/base.html'%}

    {%block content%}

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

    <li data-target="#myCarousel" data-slide-to="4"></li>

    <li data-target="#myCarousel" data-slide-to="5"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

    {% for p in products %}

    {% if forloop.counter == 1 %}

    <div class="item active">

    {% else %}

    <div class="item">

    {% endif %}

        <img src="{{ p.image.url }}" alt="Image" width="460" height="345">

  <div class="carousel-caption">

    <h3>{{ p.name }}</h3>

    <p>{{ p.description }}</p>

  </div>

    </div>

    {% endfor %}

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

    {%endblock content%}

But the problem is that the slider show the product images like this:

Capture
Capture1346×624 68.5 KB

i.e it shows the products(2) on one slide without the buttons
Any solutions?thanks

2

As this relies upon a number of external factors, there’s more information that’s probably needed to provide any real help.

At a minimum, you should verify that all of the necessary components are being loaded on the page. (Look at the output from your runserver command or look at the network information in the developer tools on your browser. You’re looking to see that all the css and js files are being loaded properly.)

Once that’s been verified, it might be useful to see your base template and any user-written javascript that manages that page.

But once it’s been verified that everything is being loaded properly, then it really falls outside the realm of being a Django issue and one more of being a bootstrap issue - in that case, it’s possible that you might find more help in a bootstrap-related forum.