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

Question

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="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>

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

Might be a `css` `width` conflict on the images? Like maybe the Theme has a `img { width: auto; }` that has more specificity than the img styles from owl2? — mikerojas, Mar 30 '20 at 16:08
@mikerojas, If I click on inspect element to check the code then image displaying properly — user9437856, Mar 30 '20 at 17:14

score 0 · Answer 1 · edited Jun 11 '23 at 16:27

0

.vc_row.wpb_row.vc_row-fluid.slider.vc_row-flex {
    width: 1349px !important;
    max-width: 1349px !important;
}

Fixed width and problem solved.

edited Jun 11 '23 at 16:27

Tyler2P

2,324
26
22
31

answered Jun 10 '23 at 07:22

Babloo Kannojia

1

1

You should add explanation. – Super Kai - Kazuya Ito Jun 10 '23 at 10:49
1

Welcome to Stack Overflow! Your answer contains code without explanation. It's better to include details about *how* your answer answers the question. – Kevin M. Mansour Jun 11 '23 at 15:46

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

1 Answers1