带动画的滑动滑块

我正在使用滑动滑块在我的网站上有动画。除非当我拖动幻灯片，如果不移动到下一张或上一张幻灯片我不想使用动画，一切都很好。带动画的滑动滑块

<div id="my_slider"> 
    <div id="item"> 
    <div id="name" class="hidden">slide1</div> 
    </div> 
    <div id="item"> 
    <div id="name" class="hidden">slide2</div> 
    </div> 
    <div id="item"> 
    <div id="name" class="hidden">slide3</div> 
    </div> 
</div>

这里是jsfiddle

来源

2016-05-17 elene

您是否在谈论幻灯片文本上的缩放动画“滑件”？ – Yass

您使用的name的id为多个项目，这是无效的。 id必须始终是唯一的。除了使用id定位幻灯片名称外，您还可以指定一个通用类，例如slide-name

为了使功能按照您的意愿工作，您必须使用在afterChange事件之后运行的名为的附加事件。但是，在引入其他事件处理程序之前，需要使用beforeChange事件跟踪当前幻灯片，然后检查下一张幻灯片是否与afterChange事件中的当前幻灯片匹配。如果当前幻灯片和下一张幻灯片匹配（未发生变化），请跳过动画。如果它们不匹配（发生更改），请触发动画。

仅当当前幻灯片和下一张幻灯片不匹配（即活动幻灯片已更改）时，才使用afterChange事件启动动画。使用变量来跟踪当前和下一张幻灯片分别为currSlide和nextSlide。然后在事件中，您可以通过比较currSlide到nextSlide来触发动画。

最后，我添加了一个辅助方法，将class的hidden应用于当前不可见的幻灯片名称。这可以防止文本过早出现并破坏动画。我在init以及事件中调用此方法。

更新的HTML

<div id="my_slider"> 
    <div class="item"> 
    <div id="name1" class="slide-name hidden">slide1</div> 
    </div> 
    <div class="item"> 
    <div id="name2" class="slide-name hidden">slide2</div> 
    </div> 
    <div class="item"> 
    <div id="name3" class="slide-name hidden">slide3</div> 
    </div> 
</div>

jQuery的

$('#my_slider').on('init', function(event, slick) { 
    $('.slick-active .slide-name').removeClass('hidden'); 
    applyHiddenClass(); 
}) 

$('#my_slider').slick({ 
    arrows: false, 
    speed: 900, 
}); 

var currSlide = 0; 
var nextSlide = 0; 

function applyHiddenClass() { 
    $.each($('.slick-slide'), function() { 
    if ($(this).attr('aria-hidden') == 'true') { 
     $(this).find('.slide-name').addClass('hidden'); 
    } else { 
     $(this).find('.slide-name').removeClass('hidden'); 
    } 
    }); 
} 

$('#my_slider').on('afterChange', function(event, slick, currentSlide) { 
    nextSlide = currentSlide; 
    if (nextSlide !== currSlide) { 
    $('.slick-active .slide-name').removeClass('animated zoomIn'); 
    $('.slick-active .slide-name').addClass('hidden'); 
    } 
}); 

$('#my_slider').on('setPosition', function(event, slick, currentSlide) { 
    if (nextSlide !== currSlide) { 
    $('.slick-active .slide-name').removeClass('hidden'); 
    $('.slick-active .slide-name').addClass('animated zoomIn'); 
    } 
    applyHiddenClass(); 
}); 

$('#my_slider').on('beforeChange', function(event, slick, currentSlide) { 
    currSlide = currentSlide; 
});

Fiddle Demo

如果您有任何疑问，请询问。

来源

2016-05-18 17:32:38 Yass

“ids必须始终是唯一的”，但是您在包装div上放置了一些复制的ID。好的解决方案。 – Anfelipe

好点，我已经更新了答案。 – Yass

试试这个;设定速度为零禁用动画：

$('#my_slider').slick({ 
    arrows: false, 
    speed: 0, 
});

来源

2016-05-17 13:43:43

我不想禁用动画。如果滑块移动到下一张或上一张幻灯片，我只想使用它。 – elene

带动画的滑动滑块

回答

相关问题