问题描述
我的Owl轮播被定制以定义每个项目的单独执行时间。 当用户单击“下一步”，“上一步”或拖动幻灯片时，会发生此问题。此自定义时间停止工作，并且轮播无法正确响应命令。
当用户单击NEXT，PREV或DRAG项时，为每个项确定的运行时不再起作用。 如果多次单击“下一步”，项目有时会跳到下一张幻灯片。
setState()我的Owl轮播被定制以定义每个项目的单独执行时间。 当用户单击“下一步”，“上一步”或拖动幻灯片时，会发生此问题。此自定义时间停止工作，并且轮播无法正确响应命令。
当用户单击NEXT，PREV或DRAG项时，为每个项确定的运行时不再起作用。 如果多次单击“下一步”，项目有时会跳到下一张幻灯片。
constructor(props) {
super(props);
this.state = {
addingProduct: false
}
this.onSubmit = this.onSubmit.bind(this);
}
async onSubmit(formData) {
const { addProductToServer } = this.props;
this.setState({addingProduct: true});
await addProductToServer(formData);
//this doesn't set state to false
this.setState({addingProduct: false})
}
问题已通过clearTimeout解决。
我希望该解决方案可以帮助其他人。
<html>
<header>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkmxe40PTknxrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="<?PHP echo $provedor_url;?>js/mod100/plugins/OwlCarousel2-2.2.1/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HRexmsZXHEkpYoOA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" />
<style>
.home_slider_nav_l
{
position: absolute;
left: 0;
width: 60px;
height: 64px;
background: #fd784f;
z-index: 10;
cursor: pointer;
}
.home_slider_nav_l::after
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0e1d41;
content: '';
z-index: -1;
-webkit-transition: all 600ms cubic-bezier(.25,.62,.27,.99);
-moz-transition: all 600ms cubic-bezier(.25,.99);
-ms-transition: all 600ms cubic-bezier(.25,.99);
-o-transition: all 600ms cubic-bezier(.25,.99);
transition: all 600ms cubic-bezier(.25,.99);
}
.home_slider_nav_r
{
position: absolute;
right: 0;
width: 60px;
height: 64px;
background: #fd784f;
z-index: 10;
cursor: pointer;
}
.home_slider_nav_r::after
{
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #0e1d41;
content: '';
z-index: -1;
-webkit-transition: all 600ms cubic-bezier(.25,.99);
}
.home_slider_nav_l:hover::after,.home_slider_nav_r:hover::after
{
width: 0px;
}
.home_slider_nav_l img,.home_slider_nav_r img
{
width: 12px;
height: 13px;
}
.home_slider_nav_l i,.home_slider_nav_r i
{
font-size: 2rem;
color: #FFF;
}
.home_slider_nav_left,.home_slider_nav_right
{
padding-right: 20px;
}
.home_slider_nav_right{
padding-left: 20px;
}
</style>
</header>
<body>
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Home Slider Item -->
<div class="home_slider_item" data-timing="10000" style="background-color: #000; color: #fff">
<div class="home_slider_background" style="background-image:url(https://i.postimg.cc/4ddm74MT/testimonials-background-copia.jpg)"></div>
<div class="home_slider_content_container text-center">
<div class="home_slider_content">
<h1 data-animation-in="flipInX" data-animation-out="animate-out fadeOut">Title 1 Here</h1>
</div>
</div>
</div>
<!-- Home Slider Item -->
<div class="home_slider_item" data-timing="5000" style="background-color: #1e62d4; color: #fff">
<div class="home_slider_background" style="background-image:url(https://i.postimg.cc/CxtVwhg2/4685.jpg)"></div>
<div class="home_slider_content_container text-center">
<div class="home_slider_content">
<h1 data-animation-in="flipInX" data-animation-out="animate-out fadeOut">Title 2 Here</h1>
</div>
</div>
</div>
<!-- Home Slider Item -->
<div class="home_slider_item" data-timing="5000" style="background-color: #039178; color: #fff">
<div class="home_slider_background" style="background-image:url(https://i.postimg.cc/153x6nRT/art7.jpg)"></div>
<div class="home_slider_content_container text-center">
<div class="home_slider_content">
<h1 data-animation-in="flipInX" data-animation-out="animate-out fadeOut">Title 3 Here</h1>
</div>
</div>
</div>
</div>
<div class="home_slider_nav_left home_slider_nav_l d-flex flex-row align-items-center justify-content-end">
<i class="fas fa-chevron-left"></i>
</div>
<div class="home_slider_nav_right home_slider_nav_r d-flex flex-row align-items-center justify-content-end">
<i class="fas fa-chevron-right"></i>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous"></script>
<script type="text/javascript">
function initMySlider()
{
if($('.home_slider').length)
{
var homeSlider = $('.home_slider');
homeSlider.on('initialized.owl.carousel translated.owl.carousel',function() {
var defaultTiming = 5000;
var carouselTiming = $('.owl-item.active .home_slider_item').data('timing') ? $('.owl-item.active .home_slider_item').data('timing') : defaultTiming;
setTimeout(function(){
$(".home_slider").trigger('next.owl.carousel');
},carouselTiming);
});
var carouselTiming = null;
homeSlider.owlCarousel(
{
items: 1,loop: true,smartSpeed: 1200,nav:false,dots:false
});
if($('.home_slider_nav_left').length)
{
var navLeft = $('.home_slider_nav_left');
navLeft.on('click',function()
{
homeSlider.trigger('prev.owl.carousel');
});
}
if($('.home_slider_nav_right').length)
{
var navRight = $('.home_slider_nav_right');
navRight.on('click',function()
{
homeSlider.trigger('next.owl.carousel');
});
}
function setAnimation ( _elem,_InOut )
{
var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
_elem.each ( function ()
{
var $elem = $(this);
var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut );
$elem.addClass($animationType).one(animationEndEvent,function ()
{
$elem.removeClass($animationType); // remove animate.css Class at the end of the animations
});
});
}
homeSlider.on('change.owl.carousel',function(event)
{
var $currentItem = $('.home_slider_content',homeSlider).eq(event.item.index);
var $elemsToanim = $currentItem.find("[data-animation-out]");
setAnimation ($elemsToanim,'out');
});
homeSlider.on('changed.owl.carousel',homeSlider).eq(event.item.index);
var $elemsToanim = $currentItem.find("[data-animation-in]");
setAnimation ($elemsToanim,'in');
})
}
}
initMySlider();
</script>
</body>
</html>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）