猫头鹰旋转木马静态背景答案

【问题标题】：Owl Carousel static background猫头鹰旋转木马静态背景
【发布时间】：2021-12-14 14:41:22
【问题描述】：

我只想改变文本，而背景保持静止。这是我的代码：

$('.owl-carousel').owlCarousel({
  nav: true,
  navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
  items: 1,
  responsiveClass: true,
  autoHeight: true,
  lazyLoad: true,
  lazyLoadEager: 2
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel longread_slider_text owl-lazy" style="background: url('https://picsum.photos/1000/300'); background-size: contain;
            background-repeat: no-repeat;
            background-position: center;">
  <div class="slide-item">
    <img src="https://picsum.photos/300/300" alt="image" style="opacity: 0;">
    <div class="text">
      <div>
        <span class="title">Title One</span>
      </div>
    </div>
  </div>
  <div class="slide-item">
    <img src="https://picsum.photos/300/300" alt="image" style="opacity: 0;">
    <div class="text">
      <div>
        <span class="title">Title Two</span>
      </div>
    </div>
  </div>
</div>

我为轮播设置了背景并使图像不可见。但是背景覆盖了导航点。关于如何实现这一点的任何想法？

更新：猫头鹰轮播 2.3.4 版

【问题讨论】：

如果您只是隐藏它们，为什么还要在每个幻灯片标记中添加 img 标签？
滑块的大小和它的面积取决于里面的img的大小。没有它们，滑块不会显示。我知道这是不正确的，但我想不出另一种解决方案
您可以尝试使用 CSS 设置大小。这将是最明显的解决方案。
是的，但这是一个问题：如何使所有幻灯片的图像均匀且静态。这样只有文字会改变
您使用的是哪个版本的 Owl Carousel？

标签： jquery css owl-carousel

【解决方案1】：

如果您将轮播从点中分离出来怎么办？有参数dotsContainer 在 ID 为 owldots 的轮播空 div 之后创建。然后在代码中设置参数：

$('.owl-carousel').owlCarousel({
  nav: true,
  navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
  items: 1,
  responsiveClass: true,
  autoHeight: true,
  lazyLoad: true,
  lazyLoadEager: 2,
  dotsContainer: '#owldots' //Here
});

它可以帮助您仅为轮播设置背景并为圆点创建其他样式。通过这种方式，您可以为导航（箭头）创建其他 div 并通过参数navContainer

进行设置

【讨论】：