スクロールプラグインSuperSlideの使い方

2年 ago
桜, 春樹
1 minute

SuperSlideは、スクロール機能付きWebページ要素の作成に使用されるjQueryプラグインです。画像スライダー、スクロールニュース、スクロールリストなどの作成に使用できます。以下にSuperSlideの使用例を示します。

  1. jQueryとSuperSlideのスクリプトファイルをインポートします：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.SuperSlide/2.1.3/jquery.SuperSlide.min.js"></script>
  1. コンテナ要素を作成:
<div id="slideContainer">
<!-- 在这里添加滚动内容 -->
</div>
  1. SuperSlideプラグインを初期化する：
<script>
$(document).ready(function(){
$("#slideContainer").slide();
});
</script>
  1. カスタマイズ・コンフィグレーションオプション
$(document).ready(function(){
$("#slideContainer").slide({
effect: "fade",   // 滚动效果，可选值有：fade（渐变）、left（向左滚动）、top（向上滚动）
speed: 500,       // 滚动速度，单位为毫秒
delayTime: 2000,  // 每个滚动项之间的时间间隔，单位为毫秒
autoPlay: true,   // 是否自动播放
trigger: "click"  // 触发滚动的方式，可选值有：click（点击触发）、mouseover（鼠标移入触发）
});
});

SuperSlide の基本的な使い方は以上です。必要に応じてスクロールコンテンツとカスタム構成オプションを追加すれば、さまざまなスクロール効果を実現できます。詳細な構成オプションと使用方法については、SuperSlide の公式ドキュメントを参照してください。

bannerAds