我想用一个封闭的schortcode创建一个引导旋转木马。

最后的短代码如下：
[product_carousel][product id="1"][product id="2"][product id="3"][/product_carousel]

短代码[product id="X"] 已工作并将其作为输出：

<div class="col-sm-4">
    <div class="thumb-wrapper">
        <div class="img-box">
            <img src="image-url" class="img-responsive img-fluid" alt="">
        </div>
        <div class="thumb-content">
            <h4>Title</h4>
            <p>Description</p>
            <form method="post" action="action-url" style="display: inline-block;">
                <button type="submit" class="theme-button" value="11" name="id[]">Value</button>
            </form>
            <a href="some-url" class="theme-button">Value</a>
        </div>
    </div>
</div>

上述代码需要插入到可以找到的转盘模板中here.

简化HTML

<div class="container">
  <div class="row">
    <div class="col-md-10 col-center m-auto">
      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
          <div class="item carousel-item">
            <div class="row">
             <!-- Start of shortcode [product id="1"] -->
              <div class="col-sm-4">
                <div class="thumb-wrapper">
                  <div class="img-box">
                    <img src="http://via.placeholder.com/2500x2000" class="img-responsive img-fluid" alt="">
                  </div>
                  <div class="thumb-content">
                    <h4>Rio De Janeiro</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam.</p>
                    <a href="#" class="btn btn-primary">More <i class="fa fa-angle-right"></i></a>
                    <a href="#" class="btn btn-primary">More <i class="fa fa-angle-right"></i></a>
                  </div>
                </div>
              </div>
              <!-- End of shortcode [product id="1"] -->
              <!-- Start of shortcode [product id="2"] -->
              <!-- End of shortcode [product id="2"] -->
              <!-- Start of shortcode [product id="3"] -->
              <!-- End of shortcode [product id="3"] -->
            </div>
          </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
          <i class="fa fa-angle-left"></i>
        </a>
        <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>

短代码的输出需要在<!-- Start of shortcode [product id="X"] --> 和<!-- End of shortcode [product id="X"] -->.

但当我有超过3个旋转木马项目时，比如说6个，我必须重复

<div class="item carousel-item">
    <div class="row">
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
    </div>
</div>
<div class="item carousel-item">
    <div class="row">
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
    </div>
</div>

我怎样才能做到这一点？我必须使用更多的短代码吗
即。[product_carousel][slide][product id="1"][product id="2"][product id="3"][/silde][slide][product id="4"][product id="5"][product id="6"][/silde][/product_carousel]

function getProductCarousel($atts) {
    $productIds = explode(\',\',$atts[\'product_ids\']);
    ?>
        <div class="col-center m-auto">
          <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
            <?php $slide = 0; ?>
            <?php foreach($productIds as $index => $productId) { ?>
                <?php if ($index % 3 == 0) { ?>
                    <li data-target="#myCarousel" data-slide-to="<?= $slide++; ?>" <?= $index == 0 ? \'class="active"\': \'\'; ?>></li>
                <?php } ?>
            <?php } ?>
            </ol>
            <!-- Wrapper for carousel items -->
            <div class="carousel-inner">
                <div class="item carousel-item active">
                    <div class="row">
                        <?php foreach($productIds as $index => $productId) { ?>
                            <?php if ($index % 3 == 0 && $index > 0) { ?>
                                </div></div>
                                <div class="item carousel-item"><div class="row">
                            <?php } ?>
                            <?= getSingleProduct([\'id\' => $productId]); ?>
                        <?php } ?>
                    </div>
                </div>
            </div>
            <!-- Carousel controls -->
            <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
              <i class="fa fa-angle-left"></i>
            </a>
            <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
              <i class="fa fa-angle-right"></i>
            </a>
          </div>
        </div>
    <?php
}