我正在使用AOS在滚动条上显示html元素。它单独工作良好,但是当我在包含Slick滑块的页面上使用它时,未显示应用AOS的元素。元素是隐藏的,如果滚动很多,则好像浏览器向AOS提供了有关当前滚动位置的错误信息,而某些元素在后面显示。
没有导致此问题的特定代码,在与AOS相同的页面上使用浮油会使AOS无法正常工作。
有人解决了这个问题吗,我在其他网站上看到了一些悬而未决的问题,没有找到任何解决方案?
答案 0 :(得分:0)
您必须在启动滑块后启动Aos。 我认为您必须考虑到所有以前的滑块。
// On init event
$('#productsCarousel').on('init', function(event, slick){
console.log('#productsCarousel init');
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
});
$('#productsCarousel').slick({
centerMode: true,
centerPadding: '8%',
prevArrow: '<span class="slick-prev slick-btn"><span class="p-3"><span class="icon-prev"></span></span></span>',
nextArrow: '<span class="slick-next slick-btn"><span class="p-3"><span class="icon-next"></span></span></span>',
slidesToShow: 4,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
答案 1 :(得分:0)
$(document).ready(function () {
$('#hero-slider').on('init', function (e, slick) {
var$firstAnimatingElements = $('div.hero-slide:first-child').find('[data-animation]');
doAnimations($firstAnimatingElements);
});
$('#hero-slider').on('beforeChange', function (e, slick, currentSlide, nextSlide) {
var$animatingElements = $('div.hero-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
doAnimations($animatingElements);
});
$('#hero-slider').slick({
// autoplay: true,
// autoplaySpeed: 10000,
dots: true,
fade: true
});
functiondoAnimations(elements) {
varanimationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
elements.each(function () {
var$this = $(this);
var$animationDelay = $this.data('delay');
var$animationType = 'animated ' + $this.data('animation');
$this.css({
'animation-delay': $animationDelay,
'-webkit-animation-delay': $animationDelay
});
$this.addClass($animationType).one(animationEndEvents, function () {
$this.removeClass($animationType);
});
});
}
});
答案 2 :(得分:0)
在我的情况下,我在平滑的初始化后将AOS刷新
$(window).on('load', function() {
AOS.init({
duration: 600,
once: true
});
$('.section-product-container').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
});
$('.slide-container').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
speed: 300,
autoplay: true,
fade: true,
cssEase: 'linear',
customPaging : function(slider, i) {
var number = (i+1);
if ((i+1) < 10)
number = '0'+(i+1);
return '<a>'+ number +'</a>';
}
});
$('.section-customer-container').slick({
dots: true,
infinite: true,
slidesToShow: 5,
slidesToScroll: 5,
customPaging : function(slider, i) {
if ((i+1) < 10)
return '<a>0'+(i+1)+'</a>';
return '<a>'+ i +'</a>';
}
});
AOS.refresh();
});
答案 3 :(得分:0)
我终于找到了解决这个问题的方法。 我设法在第一张幻灯片上制作动画,但在其他幻灯片上不起作用,所以我使用了 beforeChange 和 afterChange 的光滑事件。第一个我删除了,第二个我添加了“aos-animate”类。我尝试使用 AOS.refresh() 和 AOS.refreshHard() 但它没有帮助
这是我的解决方案
$('#homeslider')
.on('beforeChange', function() {
$('.slider_title').removeClass("aos-animate");
$('.slider_subtitle').removeClass("aos-animate");
$('.small_cta').removeClass("aos-animate");
$('.big_cta').removeClass("aos-animate");
// AOS.refreshHard(); this didn't work
})
.on('afterChange', function(event, slick, currentSlide) {
$('.slider_title').addClass("aos-animate");
$('.slider_subtitle').addClass("aos-animate");
$('.small_cta').addClass("aos-animate");
$('.big_cta').addClass("aos-animate");
// AOS.refreshHard(); this didn't work
});
这些类是每张幻灯片的一部分,每个类都有这样的类
<div class="slider_title" data-aos="zoom-in" data-aos-delay="300"></div>
还有一件事,我添加了 AOS.init();光滑初始化后