CSS3 Animationによる無限スクロール・スライドが実装できるjQueryプラグインinfinite slide v2をご紹介します。
Contents
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>
CSS3 Animationによる無限スクロールを実装するjQueryプラグインinfinite slide v2デモページ
CSS3 Animationによる無限スクロールを実装するjQueryプラグインinfinite slide v2デモページ
ソース元:infinite slide v2
infinite slide v2
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告