猫头鹰旋转木马静态背景
猫头鹰旋转木马静态背景
提问于 2021-12-14 14:41:22
我只希望案文有所改变，背景保持不变。这是我的代码：
$('.owl-carousel').owlCarousel({
nav: true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
items: 1,
responsiveClass: true,
autoHeight: true,
lazyLoad: true,
lazyLoadEager: 2
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel longread_slider_text owl-lazy" style="background: url('https://picsum.photos/1000/300'); background-size: contain;
background-repeat: no-repeat;
background-position: center;">
<div class="slide-item">
<img src="https://picsum.photos/300/300" alt="image" style="opacity: 0;">
<div class="text">
<div>
<span class="title">Title One</span>
</div>
</div>
</div>
<div class="slide-item">
<img src="https://picsum.photos/300/300" alt="image" style="opacity: 0;">
<div class="text">
<div>
<span class="title">Title Two</span>
</div>
</div>
</div>
</div>
我设置了旋转木马的背景，并使图像不可见。但背景涵盖了导航点。对于如何实现这一点，有什么想法吗？
upd: Owl旋转木马2.3.4版
回答 1
Stack Overflow用户
发布于 2022-01-18 00:43:14
如果你偏离了圆点旋转木马呢？有param dotsContainer创建后使用id owldots的旋转木马空div。然后在代码中设置param：
$('.owl-carousel').owlCarousel({
nav: true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
items: 1,
responsiveClass: true,
autoHeight: true,
lazyLoad: true,
lazyLoadEager: 2,
dotsContainer: '#owldots' //Here
});它可以帮助你只为旋转木马设置背景，并为圆点创建其他样式。通过这种方式，您可以为navs (箭头)创建其他div，并通过param navContainer设置它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70350803
复制相关文章
相似问题
腾讯云开发者
