SLICK - Cutout X fade
Shows problem of only fading up current slide, NOT fading out oldslide.
HTML
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//kenwheeler.github.io/slick/slick/slick.css">
<script src="//infxsolutions.com/script/jQuery/slick/1.5.0/slick.js"></script>
<h3>Using slick.js v1.5.0</h3>
<div class="slider fade">
<div><div class="image"><img src="//infxsolutions.com/dyn/_pictures/test-cutouts/silhouette_one.png" /></div></div>
<div><div class="image"><img src="//infxsolutions.com/dyn/_pictures/test-cutouts/silhouette_two.png" /></div></div>
<div><div class="image"><img src="//infxsolutions.com/dyn/_pictures/test-cutouts/silhouette_three.png" /></div></div>
</div>
CSS
body, html {
background: #3498db;
color:#FFFFFF;
font-family:arial;
}
.fade {
width:350px;
margin:0 auto;
}
.slide,img {
width:100%;
height:300px;
}
img {
transform: scale(1.2,1.2);
overflow: hidden;
}
JavaScript
$('.fade').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 1000,
fade: true,
cssEase: 'linear',
arrows: false
});