jquery - 不能影响轮播宽度
问题描述
正在努力改变轮播宽度。
旋转木马的图片是垂直的,所以宽度太大了。一直在玩宽度(%,px,vh),似乎没有任何影响轮播的宽度。它始终显示相同。
.owl-carousel.major-caousel .slider-item {
width: 50%;
}
.owl-carousel.major-caousel .slider-item img {
margin-bottom: 0;
position: relative;
object-fit:cover;
top: 0;
max-height: 70vh;
}
html
<section class="section slider-section">
<div class="row">
<div class="col-md-12">
<div class="home-slider major-caousel owl-carousel mb-5" data-aos="fade-up" data-aos-delay="200">
<div class="slider-item">
<img src="/../img/cover_up/<?php echo $product->name . $i . ".jpg"; ?>" alt="Image placeholder" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
制作宽度:100% 只会使图像重新获得其原始尺寸(因此缩放)。也玩过max-width
,width
等等。
想法?
编辑:添加 html。
解决方案
如果没记错的话,您正在使用猫头鹰旋转木马。
CSS 代码
.owl-carousel .owl-stage-outer {
width: 50%;
margin: 0 auto;
}
同样在轮播对象中将显示的项目数更改为 1
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
dots: false,
autoplay: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1, // make sure this number is 1 to display one item in the slide
nav: true
}
}
});
推荐阅读
- html - 在布尔玛堆叠单选按钮
- css - 如何自定义/更改单选按钮的默认轮廓?
- angularjs - uib-datepicker-popup 不会重新打开
- sql - SQL Server - 从 2 列获取不同的 ID 并存储在一个列表中
- python-3.x - 带有 python 3x 的 gnuplot
- python - 在变分自动编码器上获得越来越多的损失和较差的性能
- python - 如何合并具有相同列名的pandas DataFrame?
- javascript - 使用 fetch 并将凭据设置为 include 时将哪些数据发送到目标 URL
- hibernate - Lucene 和 Criteria Api 加入 2 个不同的对象
- r - 如何获取数据框中的所有 imp 值(R 鼠标)