jQueryとCSSを使ってスライダー(プラグインなし)

しかも無駄にちょっとずつズームしてくるタイプ。

#slide {
	position: relative;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}
#slide .slider {
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
}
#slide .slider:before {
	content:"";
	display: block;
	padding-top: 100vh;
}
#slide .slider > div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	animation: zoom 6s linear 0s 1 normal none running;
}
@keyframes zoom {
	0% {
		transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
	}
	100% {
		transform: scale(1.04, 1.04);
		-moz-transform: scale(1.04, 1.04);
		-webkit-transform: scale(1.04, 1.04);
		-o-transform: scale(1.04, 1.04);
		-ms-transform: scale(1.04, 1.04);
	}
}

	<div id="slide">
		<div class="slider"><div style="background-image:url(画像のURL);"></div></div>
		<div class="slider"><div style="background-image:url(画像のURL);"></div></div>
		<div class="slider"><div style="background-image:url(画像のURL);"></div></div>
		<div class="slider"><div style="background-image:url(画像のURL);"></div></div>
	</div>

$(window).load(function(){
	var page = 0;
	var lastPage = parseInt($("#slide .slider").length-1);

	$("#slide .slider").css("display", "none");
	$("#slide .slider").eq(page).css("display", "block");

	function changePage() {
		$("#slide .slider").fadeOut(1000);
		$("#slide .slider").eq(page).fadeIn(1000);
	};

	var Timer;

	function startTimer() {
		Timer =setInterval(function() {
			if(page === lastPage) {
				page = 0;
				changePage();
			} else {
				page ++;
				changePage();
			};
		},5000);

	}

	function stopTimer() {
		clearInterval(Timer);
	}

	startTimer();
});

前の記事

管理画面の記事一覧にアイキャッチをサムネイルで表示

次の記事

CMYK画像のインキ総使用量を300%以下に