我的照片滑块，“猫头鹰轮播”将照片放在彼此下方？答案

【问题标题】：My photo slider, "owl carousel" places the photo's under each other?我的照片滑块，“猫头鹰轮播”将照片放在彼此下方？
【发布时间】：2023-12-28 10:39:01
【问题描述】：

我在一个网站上工作，有 2 个来自“owl-carousel”的照片滑块。

第一个滑块效果很好，但第二个滑块将所有照片放在一起。

是 jquery 的问题还是 html 的问题？

<div class="modal-body">
   <div class="row">
      <div class="col-md-12"> 

         <!-- portfolio media -->
         <div class="portfolio-images"> 

            <!-- image slider -->
            <div id="owl-portfolio1" class="owl -carousel">
               <div class="item active"> <img src="images/print1.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
               <div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
            </div>
         </div>
      </div>
   </div>
</div>


<script>
    $(document).ready(function () {
        $("#owl-portfolio").owlcarousel({
        });
        $("#owl-portfolio").owlcarousel({
        });
    });
</script>
</div>

【问题讨论】：

介意显示导致问题的相关代码吗？
我想，但我不能在下面放任何东西，因为声誉低。我确实遵循了threeandme的提示，它改变了一些东西，现在只有一张图片但仍然没有滑块或按钮。
缺少按钮可能是由于 css。确保在 div 标签中包含相关的类。
@Simonsays ：添加有问题的代码...不是 cmets，您只需添加它，如果需要，我会进行必要的格式化！ :)

标签： javascript jquery html css owl-carousel

【解决方案1】：

您是否确保每个都有一个特定的 id 选择器，例如 #owl-carousel-1 和 #owl-carousel-2，然后使用启动代码单独激活每个选择器，更改选择器以适应每种情况。

<div id="owl-carousel-1" class="owl-carousel" >
  <!-- the carousel -->
</div>
<div id="owl-carousel-2" class="owl-carousel" >
  <!-- the second carousel -->
</div>

<script>
$(document).ready(function() {

  $("#owl-carousel-1").owlCarousel();
  $("#owl-carousel-2").owlCarousel();

});
</script>

【讨论】：

你的意思是，我必须更改 de ccs？或者我需要把这段代码放在源代码中？
不，我的意思是每个轮播都应该有不同的 id 标签。然后你可以设置两个调用，如脚本标签所示
是的，我明白了，我也把你的脚本标签放进去，它改变了一点，但它仍然没有显示按钮，或者任何滑块的迹象。