卡片式焦点图切换动画特效单一图片切换效果-freejs.net代码演示

首页>>Jquery图片>>卡片式焦点图切换动画特效单一图片切换效果(2019-05-17)

卡片式焦点图切换动画特效单一图片切换效果

XML/HTML Code

<div class="wrapper">
<div class="clash-card goblin">
<div class="clash-card__image clash-card__image--goblin">
<img src="img/goblin.png" alt="goblin" />
</div>
<div class="clash-card__level clash-card__level--goblin">Level 5</div>
<div class="clash-card__unit-name">The Goblin</div>
<div class="clash-card__unit-description">
These pesky little creatures only have eyes for one thing: LOOT! They are faster than a Spring Trap, and their hunger for resources is limitless.
</div>
<div class="clash-card__unit-stats clash-card__unit-stats--goblin clearfix">
<div class="one-third">
<div class="stat">30<sup>S</sup></div>
<div class="stat-value">Training</div>
</div>
<div class="one-third">
<div class="stat">32</div>
<div class="stat-value">Speed</div>
</div>
<div class="one-third no-border">
<div class="stat">100</div>
<div class="stat-value">Cost</div>
</div>
</div>
</div>
</div>

JavaScript Code

<script type="text/javascript">
(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);
});
})();
</script>