スポンサーリンク

simplyScroll v2」というjQueryプラグインを使えば、画像やテキストブロックといった要素を横方向にゆっくりとループスライドするスライドショーを作ることができます。

 

※2017年5月段階のバージョンでは、横幅可変サイズ指定時に無限スクロールが発生しない(1度のみループスライドして停止する)という不具合を確認しています。

横幅を固定幅で指定するか、以下の記事を参考に、もう一つのループスクロール用jQueryプラグインを使っての実装をお試しください。

 

コンテンツを縦横自在に無限スクロールさせる「infiniteslide.js v2」

 

スポンサーリンク

ループスクロールの作り方

「simplyScroll v2」をダウンロードする

まずは、公式サイトからプラグインをダウンロードしましょう。

 

外部ページ「jQuery simplyScroll」公式ダウンロードサイト

 

 

プラグインファイルをサーバーにアップロードする

ダウンロードしたzipファイルを解凍します。

 

 

解凍したフォルダの中から、「jquery.simplyscroll.js」「jquery.simplyscroll.css」を選択して、サーバー上にFTP転送でアップロードします。

 

 

「FTP転送って何?」という方は以下の記事を参考にしてみてください。

 

「FileZilla」を使ってサーバーにFTPファイル転送を行う手順

 

プラグインの読み込みとプログラムの記述

ループスライドを実装したいサイト上で、以下のようなプログラムの記述を行います。

 

プラグイン読み込みと指定エリアをループスライドさせる記述

 

実際にスライドさせるエリアの記述

 

スライドのデザインを調整する記述

 

 

スポンサーリンク
おすすめの記事