admin管理员组文章数量:1391937
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
本文标签:
版权声明:本文标题:plugins - Owl Carousel2 image not displaying full width when using Stretch row and content, Stretch row and content(no padding) 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1744619462a2615932.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论