wordpress 中的多项目轮播引导程序答案

【问题标题】：multi item carousel bootstrap in wordpresswordpress 中的多项目轮播引导程序
【发布时间】：2018-09-11 16:55:09
【问题描述】：

我想在 wordpress 的索引页面中添加第二个轮播，它必须是多项。问题是轮播控件与我的第一个轮播控件重叠，即使它们具有不同的 ID。
这是代码：

<section class="carousel slide" data-ride="carousel" id="postsCarousel" style="margin-top:20px;">
   <div class="container carousel-inner" >
      <div class="item row  <?php echo ($count == 0) ? 'active' : ''; ?>"style="height:250px; background-color:transparent">
         <?php $slider = get_posts(array("category_name"=>"slider2", 'posts_per_page' => 6)); ?>
         <?php $count = 0; ?>
         <?php foreach($slider as $slide): ?>
         <div class="col-md-4">
            <div class="card" style="width: auto; margin:20px">
               <img class="card-img-top" src="<?php echo the_post_thumbnail();?>/..." alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                  <p class="card-text"><?php the_content(""); ?></p>
                  <a href="<?php the_permalink(); ?>" class="btn btn-primary " style="margin-bottom:6px;"> ادامه</a>
                  <div class="card-footer">
                     <small class="text-muted"><?php echo get_the_date(); ?></small>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <?php $count++; ?>
      <?php endforeach; ?>
   </div>
   <a class="carousel-control-prev" href="#postsCarousel" role="button" data-slide="prev" style="background-color:gray;border-radius:10px">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#postsCarousel" role="button" data-slide="next" style="background-color:gray;border-radius:10px">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</section>

【问题讨论】：

你有工作代码的开发链接吗？
不，很抱歉没有
我建议使用owl carousel，它有很多管理幻灯片的选项。

标签： jquery html css wordpress bootstrap-4

【解决方案1】：

我假设您的滑块控件具有 position: absolute; CSS 属性，

尝试应用位置：相对；对于轮播父级

例如，

#postsCarousel{position:relative;}

因此位置：绝对，将仅适用于第一个轮播控件。

【讨论】：