plugins - Owl Carousel2 image not displaying full width when using Stretch row and content, Stretch row and content(no padding)

I am using Wordpress with a WPBakery page builder and owl Carousel2. I have to display the slider on my page. I have to

I am using Wordpress with a WPBakery page builder and owl Carousel2. I have to display the slider on my page. I have to display the image and text. I have 3 sliders. The code is working perfectly on the localhost without WordPress. No, I have to use this code in WordPress. I am not using any plugin for the slider. I just used text-block and add my code.

$("#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=".3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href=".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=".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=".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=".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=".4.1/jquery.min.js"></script>
<script src=".3.4/owl.carousel.min.js"></script>

Now the slider is working on the page but the issue is my images not displaying end to end. I am getting output like, two images are displaying.

There is no issue with the first two. I am getting the issue in 3rs and 4th option. If I choose 3rd or 4th then I am getting the two images. Ideally, it should display only one image.

Row setting-> Row stretch-> below image

My expected output is

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744619463a4584252.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信