Как вывести слайды swiper-slider при помощи ACF-повторителя?

Question

[Nik_1011]

Здравствуйте.

Задал изображения и текст при помощи ACF-повторителя, пытаюсь вывести,но вместо этого ничего не выводится вообще. Что необходимо изменить?

<div id="swiper-slider_208" 
class="swiper-container swiper-slider swiper-slider__ swiper-container-horizontal" 
data-min-height="1px" data-autoplay="5000" data-loop="true" 
data-slide-effect="slide" spead="">

  <div class="swiper-wrapper" 
style="transform: translate3d(-10633px, 0px, 0px); transition-duration: 0ms;">

    <?php if (have_rows('slider')) : ?>
      <?php while (have_rows('slider')) : the_row(); ?>
        <?php
                            $sliderImage = get_sub_field('slider_image');
                            $sliderHeader = get_sub_field('slider_header');
                            $sliderDescription = get_sub_field('slider_description');
                            ?>

          <div class="swiper-slide  swiper-slide-duplicate"
 data-slide-bg="<?php echo $sliderImage; ?>" 
style="background-image: url(<?php echo $sliderImage; ?>); 
background-size: cover; width: 1519px;" data-swiper-slide-index="0">

            <div class="swiper-slide-caption not-animated" 
data-caption-animate="fadeIn" data-caption-delay="200">
              <div class="camera_caption ">

                <div class="container">
                  <div class="row">
                    <div class="col-sm-6">

                      <div class="item_content">

                        <h2 class="slide-title heading-style-2 visible-first"><span class="item_title_part_0 item_title_part_odd item_title_part_first_half item_title_part_first"><?php the_field("slider_header"); ?> </span> </h2>
                        <?php the_field("slider_description"); ?>
                          <!-- Read More link -->
                          <div class="btn-wrapper">

                          </div>

                      </div>

                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <?php endwhile; ?>
            <?php endif; ?>

              <!--data-height="49.01041666666667%" -->
  </div>
  <!-- Swiper Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Comments

[FanatPHP]

зачем тебе здесь if?
Какую смысловую нагрузку он несёт?

[Антон Литвиненко]

Зачем у вас в разметке инлайн стили которые должен генерить сам слайдер?

[Lord_Dantes]

У вас должна быть примерно такая структура для вывода:

<div class="homebanner-swiper swiper-container">
      <div class="swiper-wrapper">

        <?php if( have_rows('slider') ): while( have_rows('slider') ) : the_row();
          $sliderBackground = get_sub_field('slide-background');
          $sliderTitle = get_sub_field('slide-title');
          $sliderDescription = get_sub_field('slide-description'); ?>
          <div class="swiper-slide">
            <img class="swiper-slide--img" src="<?php echo $sliderBackground ?>" alt="" />
            <div class="swiper-slide--container">
              <h1><?php echo $sliderTitle ?></h1>
              <p><?php echo $sliderDescription ?></p>
            </div>
          </div>
        <?php endwhile;
        endif; ?>

      </div>
      <div class="swiper-pagination"></div>
    </div>

И JS для слайдера стандартный уже. Активируете по классу, например тут homebanner-swiper. Стили контейнера подключаете к swiper-container.

[FanatPHP]

Lord_Dantes, а зачем здесь if?
Какую смысловую нагрузку он несёт?

[Антон Литвиненко]

FanatPHP, ну это стандартный пример из документации. Я обычно делаю както-так, чтобы при отсутствии слайдов не выводилась лишняя разметка

<?php if ( have_rows('slider') ): ?>

  <div class="homebanner-swiper swiper-container">
    <div class="swiper-wrapper">

      <?php while( have_rows('slider') ) : the_row();
        $sliderBackground = get_sub_field('slide-background');
        $sliderTitle = get_sub_field('slide-title');
        $sliderDescription = get_sub_field('slide-description'); ?>
        <div class="swiper-slide">
          <img class="swiper-slide--img" src="<?php echo $sliderBackground ?>" alt="" />
          <div class="swiper-slide--container">
            <h1><?php echo $sliderTitle ?></h1>
            <p><?php echo $sliderDescription ?></p>
          </div>
        </div>
      <?php endwhile; ?>

    </div>
    <div class="swiper-pagination"></div>
  </div>

<?php endif; ?>

[Lord_Dantes]

Антон Литвиненко, да, ваш вариант будет более правильным.

[Антон Вебсайтовский]

Антон Литвиненко, у меня как-то не корректно работает, если я без php вывожу, просто дублирую картинки ! то все ок при адаптации, показывать там 3 слайда при определенном размере или 2, работает, а вот если я через php подгружаю фотку, то при адаптации показывать 3 фото, он у меня чет не то творит, растягивает блок и весь слайдер уходит за экран, ну часть слайда.

<div class="swiperc">
  <div class="swiper">
    <div class="swiper-wrapper">
      <?php foreach ($productsFound as $product) : ?>
        <a class="swiper-slide" href="<?= Helper_Tree::getUrlProduct($product->id) ?>" title="Перейти в товар - <?= $product->prname ?>">
          <?php if ($product->getImage()) : ?>
            <img src="/media/uploads/small/small-<?php echo ($product->getImage()) ?>" alt="<?= $product->prname ?>" title="Перейти в товар - <?= $product->prname ?>" />
          <?php else : ?>
            <img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
          <?php endif; ?>
        </a>
      <?php endforeach; ?>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

[Антон Вебсайтовский]

Антон Вебсайтовский, удалось решить, через overflow: hidden;, в нужном месте.