[英]Bootstrap Carousel: How to stop auto sliding on large screen
I am trying to find a way to make my slide/carousel to stop when the screen reaches 992px or plus (but it is also nice if it back to work again if I manually reduce my screen size even if the user normally doesn't do it). 我正在尝试寻找一种方法来使幻灯片/轮播在屏幕达到992px或更高时停止播放(但即使用户通常不手动操作,如果我手动减小屏幕尺寸也可以恢复工作,这也很好)它)。
So, I tried the code below but it is not working, and doing many researches I just find solutions that disable the auto slide from every size of screen. 因此,我尝试了下面的代码,但是它不起作用,并且进行了许多研究,我只是找到了在各种尺寸的屏幕上都禁用自动滑动的解决方案。
Do you have any suggestion? 你有什么建议吗?
function(){
var windowIsLarge = window.matchMedia("(min-width:992px)").matches;
if (windowIsLarge) {
//carousel disabled
$('.carousel').carousel({
interval: false;
});
};
};
Heres's my updated code, which doesn't work either. 这是我更新的代码,也不起作用。 I can't see what is wrong with my code there. 我在那里看不到我的代码有什么问题。
$(document).ready(updateCarousel);
$(window).resize(updateCarousel);
function updateCarousel() {
var $containerWidth = $(document).width();
if ($containerWidth <= 998) {
$('.carousel').carousel({
interval: 500
});
}
if ($containerWidth > 998) {
$('.carousel').carousel({
interval: false
});
}
}
I found this answer which I think relates, try: 我找到了我认为相关的答案 ,请尝试:
$(window).on('resize', function(){
var win = $(this);
if (win.width() > 992) {
$('carousel').removeClass('carousel');
}
});
I think you're sort of on the right track, but you need to add an event listener to your matchMedia so that it updates as the window resizes. 我认为您处在正确的轨道上,但是您需要向matchMedia添加事件侦听器,以便它在窗口调整大小时更新。
From: https://www.redweb.com/agency/blog/2013/september/responsive-performance-matchmedia 来自: https : //www.redweb.com/agency/blog/2013/september/sensitive-performance-matchmedia
var media = window.matchMedia('(min-width:992px)');
media.addListener(function (mediaQueryList) {
if (mediaQueryList.matches) {
$('.carousel').carousel({
interval: false
});
} else {
$('.carousel').carousel({
interval: 500
});
}
});
update: 更新:
if( $(window).width() > 992 ) {
// disable carousel
$('.carousel').carousel({
interval: false,
});
}
use 采用
datainterval = "false"
in div tag div标签中的datainterval = "false"
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false" >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.