如何解决如何在 Bootstrap 4.x 中向滑块添加标签
我有使用 bootstrap 4.x 的滑块。下面我放了我们块中的代码。
这里我也把 CSS 样式放在下面
.banner-slider-top {
margin-top: 30px;
background: #fff;
margin-bottom: 30px;
border: 1px solid #d3d3d3;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.slider-2 .owl-carousel {
width: 100%;
display: block;
white-space: nowrap;
opacity: 1;
visibility: visible;
height: auto;
min-height: 30px;
}
这里是代码滑块和 javascript 代码:
<div class="banner-slider-top">
<div class="row">
<div class="d-none d-md-block col-md-3"></div>
<div class="col-12 col-xl-12">
<div class="row no-gutters bn-inner">
<div class="col-12 col-sm-12 col-md-12">
<div class="item-bn-slider-05 slider-2 lazyload">
<div class="owl-carousel owl-theme">
<div class="item-slider">
<div class="img-slide"><span class="item object-fit"><span class="img-lazy-wrap" style="padding-bottom: 70.57%;"><img class="media-lazy lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" width="500" height="374" data-src="{{media url='wysiwyg/magebig/layout05/feerdi_0325_banner.png'}}"></span></span></div>
<div class="block-center">
<p class="text-small animated fadeInDownSlide"><!--LIMITED EDITION--></p>
<h2 class="text-large animated fadeInDownSlide delay-0s5"><!--Experionce<br>Virtual Reality Now!<br>Version 2.0--></h2>
<div class="text-normal animated fadeInDownSlide delay-1s">
<div><!--Discount--></div>
<p><!--40% Off--></p>
</div>
<!-- <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Shop now</span></a></div>--></div>
</div>
<div class="item-slider">
<div class="img-slide"><span class="item object-fit"><span class="img-lazy-wrap" style="padding-bottom: 70.57%;"><img class="media-lazy lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" width="500" height="374" data-src="{{media url='wysiwyg/magebig/layout05/feerdi_banner_home.png'}}"></span></span></div>
<div class="block-center">
<p class="text-small animated fadeInDownSlide"><!--Discount--></p>
<h2 class="text-large animated fadeInDownSlide delay-0s5"><!--Wooden<br>Minimalist<br>Chair--></h2>
<div class="text-normal animated fadeInDownSlide delay-1s">
<div><!--Price just--></div>
<p><!--$159.99--></p>
</div>
<!-- <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Shop now</span></a></div>--></div>
</div>
</div>
</div>
<script type="text/javascript" xml="space">// <![CDATA[
require(['jquery','owlWidget'],function ($) {
$(function() {
$('.item-bn-slider-05').owlWidget({
autoplay: true,items: 1,autoplayTimeout: 8000,dots: true,nav: true,loop: true,margin: 0
});
});
});
// ]]></script>
</div>
</div>
</div>
</div>
</div>
这里我有两个问题:
- 如何将照片横幅装入相框?因为它现在太大了。
- 如何在滑块下添加标签?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。