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

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

Contents

読込CSS、jsファイル
読込JsファイルとJavaScriptの記述
複数コンテンツを要素同士のマージンを取って左右スライドさせるHTMLの記述
CSS3 Animationによる無限スクロールを実装するjQueryプラグインinfinite slide v2デモ

読込CSS、jsファイル

	<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>

読込JsファイルとJavaScriptの記述

※多数オプションがあるので「infinite slide v2」を参照ください。

	<script src="jquery-3.6.0.min.js"></script>
	<script src="infiniteslidev2.js"></script>
	&lt;script type=&quot;text/javascript&quot;&gt;
		$(function () {
			$(&#039;.slide_margin&#039;).infiniteslide();
		});
	&lt;/script&gt;

複数コンテンツを要素同士のマージンを取って左右スライドさせるHTMLの記述

※今回複数コンテンツを要素同士のマージンを取って左右スライドさせる記述ですが、縦スクロール・スライドも可能なので「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>