javascript - 在 wordpress 中使用拉伸行和内容、拉伸行和内容（无填充）时，猫头鹰 Carousel2 图像不显示全宽

Question

我正在使用带有 WPBakery 页面构建器和 owl Carousel2 的 Wordpress。我必须在我的页面上显示滑块。我必须显示图像和文本。我有 3 个滑块。该代码在没有 WordPress 的本地主机上完美运行。不，我必须在 WordPress 中使用此代码。我没有为滑块使用任何插件。我只是使用了文本块并添加了我的代码。

$("#owl-slider").owlCarousel({
  loop: true,
  navigation: false,
  pagination: true,
  nav: true,
  singleItem: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<div id="owl-slider" class="owl-carousel owl-theme">
  <div class="item">
    <div class="slide_img slider1 blue-overlay">
      <img src="https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg">
      <div class="slider-heading">
        <div class="w800 gptw-sectionHeading">
          <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="slide_img slider2 blue-overlay">
      <img src="http://www.freestockphotos.biz/pictures/12/12124/sunset.jpg">
      <div class="slider-heading">
        <div class="w800 gptw-sectionHeading">
          <h2>>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="slide_img slider3 blue-overlay">
      <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg">
      <div class="slider-heading">
        <div class="w800 gptw-sectionHeading">
          <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

现在滑块正在页面上工作，但问题是我的图像没有端到端显示。我得到输出，显示两个图像。

前两个没有问题。我在 3rs 和 4th 选项中遇到了问题。如果我选择第 3 或第 4，那么我会得到这两个图像。理想情况下，它应该只显示一张图像。

行设置->行拉伸->下图

我的预期输出是