jquery Owl Carousel图像幻灯片无法很好地调整大小

jvidinwx  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(173)

我在一个网页上工作,是使用猫头鹰旋转木马的图像滑块。然而,他们没有很好地响应屏幕大小调整,我已经使用他们之前在其他网页上,他们的工作很好。我拍摄了一段屏幕视频,以演示该问题:.任何帮助这是真的很感激.
超文本标记语言:

<div class="module__container--half flex__responsive">
    
        <div class="module__container--item">
            <div class="owl-carousel owl-theme filler__slider filler__slider--one">
                <div class="item filler__img--full filler__img--one"></div>
                <div class="item filler__img--full filler__img--four"></div>
            </div>
        </div>
        
        <script>
        
            $('.owl-carousel').owlCarousel({
                loop:true,
                center:true,
                autoWidth:true,
                margin:0,
                nav:true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:3
                    },
                    1000:{
                        items:5
                    }
                }
            })
            
        </script>
        
        <div class="module__container--item tablet__adjust animatedParent animateOnce" style="display: flex; display: -webkit-flex;">
            <div class="filler__content--slider" style="margin-left: 0px !important;">
                <div class="standard__content filler__content filler__content--one animated fadeInRightShort delay-375">
                    <h3 style="text-align: left;">FILLER SECTION</h3>
                    <p class="h6 standard__content--text" style="font-weight: normal; text-align: left;">Short introduction of the client and description of the completed project. This should be anywhere from 3-5 lines. If longer, break into sections based on client background and project overview. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no.</p>
                </div>
            </div>
        </div>
        
    </div>

字符串
CSS:

.filler__slider, .filler__slider .owl-stage-outer, .filler__slider .owl-stage-outer .owl-stage, .filler__slider .owl-stage-outer .owl-stage .owl-item {height: 100vw !important;}
.filler__slider .owl-stage-outer .owl-stage .owl-item {width: 100vw !important;}
.filler__slider .owl-nav {display: flex !important; margin-top: -50px !important;}
.filler__slider .owl-nav .owl-prev, .filler__slider .owl-nav .owl-next {z-index: 1000 !important;}
.filler__slider .owl-nav .owl-prev {transform: rotate(180deg);}
.filler__slider .owl-nav .owl-next {transform: rotate(0deg);}
.filler__slider {overflow: hidden !important;}

.filler__slider--one .owl-nav {justify-content: flex-end !important; padding-right: 30px;}
.filler__slider--four .owl-nav {justify-content: flex-start !important; padding-left: 30px;}
.filler__content {margin: auto !important; position: relative; padding-top: 20px; padding-bottom: 30px;}
.filler__img--full {background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vw; width: 100%;}
.filler__img--one {background-image: url(images/template_filler_one.png);}
.filler__img--two {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 522px;
    margin: auto;
    position: relative;
    width: 85vw;
}
.filler__img--three {
    width: 516px;
    margin: auto;
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 80vw;
}
.filler__img--four {background-image: url(images/template_filler_four.png); margin-top: 0px;}
.order__one {order: 2}
.order__two {order: 1}

.filler__content--slider {width: 100%; height: 100%; margin: auto; display: flex; display: -webkit-flex;}

snz8szmq

snz8szmq1#

最好的解决方案是将responsiveRefreshRate选项设置为responsiveRefreshRate:10(默认值为200ms)。不过,我现在发现了一个新的滑块插件称为Flickity,这是惊人的。到目前为止,最好的滑块插件,我用过。Flickity by Metafizzy

相关问题