为什么在Django中创建for循环时swipper 3d滑块不能正常工作？

Question

{% extends 'elections/base.html'%}
{% load static %}
{% block content %}
<div class="row">
    <div class="col-lg-12">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                     <div class="row candidate_details">
                         {% for president in presidents %}
                         <div class="card">
                             {% if forloop.counter == 1 %}
                             <div class="card-body">
                                 <img src="{{president.imageURL}}" alt="profile image" 
                                   class="profile-img1">
                                 <h1>{{president.first_name}} {{president.last_name}}</h1>
                             </div>
                         </div>
                             {% else %}
                             {% endif %}
                             <div class="card">
                                 <div class="card-body">
                                     <h1>Incoming Results</h1>
                                     <hr>
                                     <h2>Total Votes</h2>
                                     <h1>1,233,333 votes</h1>
                                     <hr>
                                     <h1>36%</h1>
                                     <hr>
                                 </div>  
                             </div>
                             {% endfor %}
                     </div>      
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
  
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
       
    <script>
        var swiper = new Swiper('.swiper-container', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
        rotate: 30,
        stretch: 0,
        depth: 500,
        modifier: 1,
        slideShadows: true,
      },
        pagination: {
            el: '.swiper-pagination',
        },
    });
     
    </script>

{% endblock content %}

我想在描述区域中有一个图像和数据的3d滑块。 我想显示一个候选人的形象和他的详细资料 如图所示，每张幻灯片上每次都有一位候选人：