这是一款效果非常炫酷的jQuery和CSS3带轮播效果的游戏人物卡片设计效果。该游戏人物卡片通过背景图片的切换来显示不同的人物效果，轮播效果通过slick幻灯片插件来制作。

使用方法

使用该游戏人物卡片需要引入slick幻灯片插件的相关文件。

HTML结构

每一张游戏卡片都使用下面的HTML结构来制作，不同的卡片使用不同的图片。

  

    
  
  
Level 4
  
The Barbarian
  

    
  

  

    

      
20S
      
Training
    

    

      
16
      
Speed
    

    

      
150
      
Cost
    

  

   
                

卡片的效果截图如下：

JavaScript

在页面加载完毕之后，通过slick()方法来初始化slick幻灯片插件。然后在幻灯片切换的时候，对.slide-container容器做事件监听，并显示和隐藏相应的图片。

(function() {
  
  var slideContainer = $('.slide-container');
  
  slideContainer.slick();
  
  $('.clash-card__image img').hide();
  $('.slick-active').find('.clash-card img').fadeIn(200);
  
  // On before slide change
  slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.slick-active').find('.clash-card img').fadeOut(1000);
  });
  
  // On after slide change
  slideContainer.on('afterChange', function(event, slick, currentSlide) {
    $('.slick-active').find('.clash-card img').fadeIn(200);
  });
  
})();