「javascript/gallery」の編集履歴（バックアップ）一覧に戻る

javascript/gallery - (2016/09/07 (水) 11:32:52) のソース

#js(){{{{{
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css">
<style>
.gallery p{
	text-align:center;
	width:600px;
	height:337px;
	margin:0px auto;
}
.gallery p img{
	display:none;
}
.gallery{
	background-color:#DDD;
	display:inline-block;
	margin:10px auto;
	padding:20px 30px 70px;
	border: 1px solid #999;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://img.atwikiimg.com/www9.atwiki.jp/f_go/pub/slick/js/slick.min.js"></script>
<script>
$(document).ready(function(){
	/*** @wikiモード ***/
	var img = $('div.gallery div img');
	var p = $('<p>').append(img);
	$('div.gallery div').html('');
	$('div.gallery').append(p);
	
	/*** slick ***/
	$('.gallery p').slick({
		dots: true,
		infinite: true,
		speed: 500,
		fade: true,
		cssEase: 'linear'
	});
	
	// 対応していない場合は画像を非表示
	$('.gallery p img:nth-child(n+2)').css('visibility', 'visible');
});
</script>
}}}}}