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

<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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$(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>

<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>

1

2

3

4

5

6

</div>

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

.slider.slick-initialized {
	opacity: 1
}

1

2

3

4

5

6

7

8

.slider {

opacity: 0;

transition: opacity .2s linear

}

.slider.slick-initialized {

opacity: 1

}

jQuery

HTML

CSS

コメント