最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论