【slick】カルーセルスライダー実装例②

TOPページはこんな感じに実装しています。

<link rel="stylesheet" href="slick.css" type="text/css" />
<link rel="stylesheet" href="slick-theme.css" type="text/css" />

<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="slick.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('.magazine2').slick({
		dots: true,
		infinite: true,
		speed: 500,
		fade: true,
		cssEase: 'linear',
		autoplay:true,
		autoplaySpeed:10000,
		pauseOnHover:false
	});
});
</script>

<div class="magazine2">
<div><img src="top_anime.gif" alt="Hangout Laboratory" width="950px" height="500px; "/></div>
<div><img src="top_anime_ver3.gif" alt="Hangout Laboratory" width="950px" height="500px;" /></div>
<div><img src="top_anime_ver3.gif" alt="Hangout Laboratory" width="950px"height="500px;" /></div>
<div><img src="top_anime_ver2.gif" alt="Hangout Laboratory" width="950px" height="500px;" /></div>
</div>
タイトルとURLをコピーしました