使用slick轮播图插件时，出现轮播图在切换时在上方的文字闪烁问题

前言

• 轮播图在切换时出现闪烁、定位在图片上方字体也随之闪烁问题。主要体现在最后一张轮播图切换到第一张轮播图，或者第一张切换到最后一张的情况。
• 使用的slick轮播图插件，使用其他插件可以将解决方法作为参考；

解决方式

思路：在轮播图切换前添加一段让其持久显示自定义动画，从而渡过闪烁的时间，并在轮播图切换后将其移除。

• css自定义一个动画如下所示

.anmation{
	animation: anmation 0.8s ease-in;
}
@keyframes anmation {
	0% {
		opacity: 1;
	  }
	100% {
		opacity: 1;
	  }
}

代码描述：添加名为anmation 的自定义动画，效果位在0.8s的时间中被添加的类元素一直显示

• 添加轮播图切换前后方法

$(".banner").on("beforeChange", function(event, slick, currentSlide, nextSlide){
   event.currentTarget.classList.add("anmation")
});
$(".banner").on("afterChange", function(event, slick, currentSlide){
    event.currentTarget.classList.remove("anmation")
});

代码描述：找到轮播图容器的类名为".banner"，"beforeChange"事件被触发时，会给轮播图容器添加名为"animation"的类，用于添加动画效果。而"afterChange"事件被触发时，会从轮播图容器中移除名为"animation"的类，以移除动画效果。