[jQuery]slickで一瞬画像が縦に並ぶ時はCSSでopacityとtransitionを指定

jQuery

<script src="slick/slick.min.js"></script>
<script>
$(function(){
	$('.slider').slick({
		arrows: false,
		autoplay: true,
		dots: false,
		infinite: true,
		speed: 5000,
		slidesToShow: 3,
		slidesToScroll: 1,
		variableWidth: true,
		autoplaySpeed: 0,
		centerPadding: 0,
		cssEase:'linear',
		swipe: false,
		draggable: false,
	});
});
</script>

HTML

<div class="slider">
	<div class="slider-img" style="background:url('/img1.jpg') top center;background-size: cover">&nbsp;</div>
	<div class="slider-img" style="background:url('/img2.jpg') top center;background-size: cover">&nbsp;</div>
	<div class="slider-img" style="background:url('/img3.jpg') top center;background-size: cover">&nbsp;</div>
	<div class="slider-img" style="background:url('/img4.jpg') top center;background-size: cover">&nbsp;</div>
</div>

CSS

.slider  {
	opacity: 0;
	transition: opacity .2s linear
}

.slider.slick-initialized {
	opacity: 1
}