カーテンのような斜めに画像が切り替わるスライダー

完成形はこのようになります

HTMLの記述はこちら

<div id="sampleBox_210214">
<!--高さを可変させるために透明の画像を配置。切り替える画像の大きさと一緒にしてください-->
	<img src="../images/common/sample_bg_transparet.png" alt="">
	<div class="slider">
		<div class="slide isNow">
			<div class="imgBox">
				<img src="../images/common/sample_bg01.JPG" alt="">
			</div>
		</div>
		<div class="slide">
			<div class="imgBox">
				<img src="../images/common/sample_bg02.JPG" alt="">
			</div>
		</div>
		<div class="slide">
			<div class="imgBox">
				<img src="../images/common/sample_bg03.JPG" alt="">
			</div>
		</div>
		<div class="slide">
			<div class="imgBox">
				<img src="../images/common/sample_bg04.JPG" alt="">
			</div>
		</div>
		<div class="slide isOld">
			<div class="imgBox">
				<img src="../images/common/sample_bg05.JPG" alt="">
			</div>
		</div>
	</div>
</div>

CSSの記述はこちら

▼ パソコン

#sampleBox_210214 {
		position: relative;
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}

	#sampleBox_210214 .slider {
		width: 100%;
		margin: 0 auto;
	}

	#sampleBox_210214 .slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		-webkit-clip-path: polygon(0% 0%, 0% 0%, -35% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 0% 0%, -35% 100%, 0% 100%);
		transition: 1.2s ease-in;
	}

	#sampleBox_210214 .slide.isNow {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index: 2;
	}

	#sampleBox_210214 .slide.isOld {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index: 1;
	}

▼ スマホ

#sampleBox_210214 {
		position: relative;
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}

	#sampleBox_210214 .slider {
		width: 100%;
		margin: 0 auto;
	}

	#sampleBox_210214 .slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transition: 2.5s ease-in;
		-webkit-clip-path: polygon(0% 0%, -100% 0%, -200% 100%, 0% 100%);
		clip-path: polygon(0% 0%, -100% 0%, -200% 100%, 0% 100%);
	}

	#sampleBox_210214 .slide.isNow {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index: 2;
	}

	#sampleBox_210214 .slide.isOld {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index: 1;
	}

javascriptの記述はこちら

$(function () {
	//画像の数を「isCount」に代入。
	var isCount = 4;
	//「interval」に「4秒」を代入。
	var interval = 4000;
	//「$items」に「.slide」を代入。
	var $items = $(".slide");

	//4秒ごとにくりかえす処理を変数「slideTimer」にいれます。
	var slideTimer = function () {
		//「items」から「.is-old」をとる。
		$items.removeClass("isOld");
		//「items」に対して「eq」を実行。「isCount」を取得。
		//「.isNow」をとり、「.isOld」を与える。
		$items.eq(isCount).removeClass("isNow").addClass("isOld");
		//「items」に対して「eq」を実行。
		//「isCount」が「4」だったら、「isCount」に「0」を代入。
		//そうでなければ「isCount」に「1」を足す。
		//「.isNow」を与える。
		$items.eq(isCount == 4 ? isCount = 0 : ++isCount).addClass("isNow");
	};

	//変数「slideTimer」の処理を4秒ごとにくりかえす。
	setInterval(slideTimer, interval);
});