gpt4 book ai didi

jquery - 如果我使用小型计算机,Owl Carousel 没有响应并且不适合屏幕

转载 作者:行者123 更新时间:2023-11-27 23:08:45 24 4
gpt4 key购买 nike

html

<html>
<head>
<meta charset="utf-8">
<title>Owl carousel slider</title>
<link rel="stylesheet" href="/new/owl.carousel.min.css">
<link rel="stylesheet" href="/new/owl.theme.default.min.css">
<style type="text/css">
.wrapper {width:100%; height: auto;overflow: hidden;min-width: 2500px;}
.item {height:auto; margin-right:60px; margin-left:4.5%;}
.owl-theme .owl-dots .owl-dot span {position:relative; width: 20px; height:3px; border-radius: 0;bottom: 30px; background: #000000}
.prvBtn {position:absolute;top:45%; left: 140px;z-index: 1;}
.nxtBtn {position:absolute;top:45%; right:140px;z-index: 1;}
</style>
</head>
<body>
<div class="wrapper">
<div class="owl-carousel sliderWapper owl-theme">
<div class="item"><img src="/images/cats2.jpg"></div>
<div class="item"><img src="/images/cats.jpg"></div>
<div class="item"><img src="/images/cats3.jpg"></div>
<div class="item"><img src="/images/cats.jpg"></div>
<div class="item"><img src="/images/cats4.jpg"></div>
</div>
<div class="sliderControl">
<div class="owl-controls">
<div class="owl-nav">
<div class="prvBtn"><img src="/new/prev.png" height=65px width=65px></div>
<div class="nxtBtn"><img src="/new/next.png" height=65px width=65px></div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
</div>
<script src="/new/jquery-3.4.1.min.js"></script>
<script src="/new/owl.carousel.min.js"></script>
<script src="/new/jquer1.js"></script>
</body>
</html>

jqeur1

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop:true,
autoplay:2500,
margin:10,
nav:false,
responsiveClass:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
},
9000:{
items:1
}
}
})
});

var owl = $('.sliderWapper');
owl.owlCarousel();
// Go to the next item
$('.nxtBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.prvBtn').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger('prev.owl.carousel', [300]);
})

求助!几个星期以来一直在努力请注意,我在包装器中使用了“最小宽度:2500 像素”,因为如果不这样,它就不适合我的页面。

最佳答案

尝试从文件 jqeur1 中删除以下行

var owl = $('.sliderWapper');
owl.owlCarousel();

同时删除:溢出:隐藏;最小宽度:2500px;来自包装类。它对我有用。希望对您有所帮助。

关于jquery - 如果我使用小型计算机,Owl Carousel 没有响应并且不适合屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58637934/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com