Создание Slick Carousel с Bootstrap в цикле while - PullRequest
Новая
       37

Создание Slick Carousel с Bootstrap в цикле while

0 голосов
/ 12 октября 2019

Я использую плагин ACF WordPress (поле повторителя) для создания слайдов для карусели. Поля для них:

  • Изображение
  • Имя
  • Био

То, что я пытаюсь достичь, - это два столбцамакет (Bootstrap) с .slide родителем. Итак ... 

      div.col-12
 div.col-6   div-col-6
     div.col-12 end

Или это для наглядности:

enter image description here

Теперь в повторителе два ряда. Итак, я ожидаю увидеть два .col-12 деления после запуска слика. Но в настоящее время я вижу только одного. И две строки генерируются в одном div. Т.е. вот вывод, который я вижу: 

<div class="col-12">
    <div class="col-6 image">
        <img src="#"/> // image row 1
        <img src="#"/> // image row 2
    </div>
    <div class="col-6 content">
        <h3>Name 1</h3>
        <p>Bio 1</p>
        <h3>Name 2</h3>
        <p>Bio 2</p>
    </div>
</div>

// Expected output

<div class="col-12">
    <div class="col-6 image">
        <img src="#"/>
    </div>
    <div class="col-6 content">
        <h3>Name 1</h3>
        <p>Bio 1</p>
    </div>
    <div class="col-6 image">
        <img src="#"/>
    </div>
    <div class="col-6 content">
        <h3>Name 2</h3>
        <p>Bio 2</p>
    </div>
</div>

Текущий код: 

(function( $ ) {  
    $( document ).ready( function() {

      $('.slide').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        autoplay: true,
      });

    }); 

})( jQuery );
<?php

// $image      = the_sub_field('image');
// $name       = the_sub_field('name');
// $bio        = the_sub_field('bio');
$carousel   = 'carousel'; // repeater field name

?>

<div class="carousel">
	<div class="container">
		<div class="row justify-content-center">

      <div class="slide">

        <div class="col-12">

          <!-- image -->
          <div class="col-6 image">
            <?php
              if( have_rows($carousel) ):
                $html = "";
                while ( have_rows($carousel) ) : the_row();
                    $html .= '<img src="'.get_sub_field('image').'"/>';

                endwhile;
                echo $html;
            else :
              // no rows found
            endif; 
            ?>
          </div>

          <!-- content -->
          <div class="col-6 content">
            <?php
              if( have_rows($carousel) ):
                $html = "";
                while ( have_rows($carousel) ) : the_row();
                    $html .= '<h3>'.get_sub_field('name').'</h3>';
                    $html .= '<p>'.get_sub_field('bio').'</p>';

                endwhile;
                echo $html;
            else :
              // no rows found
            endif; 
            ?>
          </div>

        </div> 
        
      </div>    

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