问题描述
努力改变轮播宽度。
旋转木马的图片是垂直放置的,因此宽度太大。播放宽度(%,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
}
}
});