Question

我想将carousel photos放在一行中，swiper可以工作，但是页面显示三行，每张照片三张，而swiper可以将很多空白用作屏幕截图.......

swiper-slide中的三个对象都显示在页面上，

swiper可以工作，但是可以使用所有对象的照片，部分对象的照片和所有空白的照片，而不是一个接一个的对象。

我如下粘贴我的home.html，真的不知道如何解决此问题，我被困在这里已经好几天了。

非常感谢您的任何建议。

<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">
        <div class="col-sm-12 home__block1 home--square--container {{ page_block.html_classes }}">
          <div class="home--square"
               style="background-image: url('{{ page_block.cover_url }}')">
            <div class="home--content">
              <div class="home--content-wrapper">
                <div class="swiper-text home--content-inner">
                  <div class="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>
    <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', {
          spaceBetween: 30,
          pagination: {
              el: '.swiper-pagination',
              clickable: true
          },
          autoplay: {
              delay: 2500,
              disableOnInteraction: false
          }
      });
  </script>
</body>
{% endblock %}

JS / Swiper-为什么轮播显示所有对象？

0 个答案: