微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

不会影响轮播宽度

如何解决不会影响轮播宽度

努力改变轮播宽度。

旋转木马的图片是垂直放置的,因此宽度太大。播放宽度(%,px,vh)时,似乎没有任何影响轮播的宽度。它始终显示相同。

enter image description here

  .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-widthwidth等一起玩。

想法?

编辑:添加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
                }
            }
        });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。