CSS3 Animationによる無限スクロール・スライドが実装できるjQueryプラグインinfinite slide v2をご紹介します。
Contents
読込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> <script type="text/javascript"> $(function () { $('.slide_margin').infiniteslide(); }); </script>
複数コンテンツを要素同士のマージンを取って左右スライドさせる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>
CSS3 Animationによる無限スクロールを実装するjQueryプラグインinfinite slide v2デモ
CSS3 Animationによる無限スクロールを実装するjQueryプラグインinfinite slide v2デモページ
infinite slide v2(ソース元)
infinite slide v2
※流用される場合は自己責任でお願いします。
デモページ