CSS3 Animationによる無限スクロールを実装するinfinite slide v2【jQueryプラグイン】｜DAD UNION

CSS3 Animationによる無限スクロール・スライドが実装できるjQueryプラグインinfinite slide v2をご紹介します。

Contents

CSS3 Animationによる無限スクロールを実装するCSSの記述
CSS3 Animationによる無限スクロールを実装するinfinite slide v2のJavaScript記述
CSS3 Animationによる無限スクロールを実装するinfinite slide v2のHTML記述
CSS3 Animationによる無限スクロールを実装するjQueryプラグインinfinite slide v2デモページ
- ソース元：infinite slide v2

CSS3 Animationによる無限スクロールを実装するCSSの記述

※reset.min.css、style.cssファイルを読み込みます。スクロール・スライドエリア（.slide_margin）のcss記述です。必要に応じて変更して下さい。

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
	<link rel="stylesheet" href="style.css" />

	<style type="text/css">
		h1{
			text-align: center;
			font-size: 24px;
			padding: 60px 0;
		}
		.slide_margin {
			display: none;
		}
		.slide_margin li {
			margin-right: 20px;
		}
	</style>

CSS3 Animationによる無限スクロールを実装するinfinite slide v2のJavaScript記述

※jquery-3.6.0.min.js、infiniteslidev2.jsファイルを読み込みます。$(‘スクロール・スライドエリア’).infiniteslide({オプション})を記述します。オプションは多数あるので「infinite slide v2」を参照ください。

	<script src="jquery-3.6.0.min.js"></script>
	<script src="infiniteslidev2.js"></script>
	<script type="text/javascript">
		$(function () {
			$('.slide_margin').infiniteslide();
		});
	</script>

CSS3 Animationによる無限スクロールを実装するinfinite slide v2のHTML記述

※スクロール・スライドエリア（class=”slide_margin”）に画像を6個（img1.jpg ～ img6.jpg）用意しました。今回複数コンテンツを要素同士のマージンを取って左右スライドさせる記述ですが、縦スクロール・スライドも可能なので「infinite slide v2（ソース元）」でご確認下さい。

	<h1>CSS3 Animationによる無限スクロールを実装するjQueryプラグインinfinite slide v2デモです。<br>要素同士のマージンを取ってます。</h1>

	<div class="module" style="border: none;">
		<ul class="slide_margin">
			<li><img src="img/img1.jpg" alt="" /></li>
			<li><img src="img/img2.jpg" alt="" /></li>
			<li><img src="img/img3.jpg" alt="" /></li>
			<li><img src="img/img4.jpg" alt="" /></li>
			<li><img src="img/img5.jpg" alt="" /></li>
			<li><img src="img/img6.jpg" alt="" /></li>
		</ul>
	</div>