Question

我想在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>

Answer 1

我假设你的滑块控件有位置：绝对; css property，

尝试申请职位：亲属;为旋转木马父母

例如，

#postsCarousel{position:relative;}

所以position：absolute，仅适用于第一个轮播控件。

wordpress中的多项旋转木马bootstrap

1 个答案: