JS / Swiper - Почему в карусели отображались все объекты? - PullRequest
Новая
       9

JS / Swiper - Почему в карусели отображались все объекты?

0 голосов
/ 30 августа 2018

Я хотел бы поместить carousel photos в одну строку, swiper работает, но на странице отображены три строки из трех фотографий, и swiper работает с большим количеством пробелов в качестве скриншота ........

три объекта в swiper-slide все отображаются на странице,

enter image description here

swiper работает, но со всеми фотографиями объектов, частичными фотографиями объектов и всеми фотографиями заготовок, а не по одному объекту.

enter image description here

Я вставил 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 %}
...