JS/Swiper - Why did carousel objects all display, and rotate

{% extends "base.html" %}
{% load i18n %}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
</head>
{% block content %}
<body>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        {% for page_block in blocks_carousel %}
              <div class="swiper-slide home--square--container">
                <div class="home--square"
                    style="background-image: url('{{ page_block.cover_url }}')">
                  <div class="home--content">
                    <div class="home--content-wrapper">
                      <div class="home--content-inner">
                        <div class="swiper-text home--content-inner--padded">
                            <h2>{{ page_block.title }}</h2>
                            {% if page_block.subtitle %}
                              <h3>{{ page_block.subtitle }}</h3>
                            {% endif %}
                            <a class="btn btn-secondary home__button" href="{{ page_block.url }}">
                              {{ page_block.primary_button }}
                            </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        {% endfor %}
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-scrollbar"></div>
    </div>
    <script type="application/ld+json">{{ webpage_schema|safe }}</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  </div>
  <script>
      var swiper = new Swiper('.swiper-container', {
          direction: 'vertical',
          calculateHeight: true,
          pagination: {
              el: '.swiper-pagination',
              clickable: true
          },
          autoplay: {
              delay: 2500,
              disableOnInteraction: false
          }
      });
  </script>
</body>
{% endblock %}