我将Wordpress与WPBakery页面构建器和猫头鹰Carousel2一起使用。我必须在页面上显示滑块。我必须显示图像和文本。我有3个滑杆。该代码在没有WordPress的localhost上可以正常运行。不，我必须在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,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,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选项中遇到问题。如果我选择3rd或4th，那么我会得到两个图像。理想情况下，它应该只显示一张图像。
图像下方的行设置->行拉伸->
我的预期输出是
