コンテンツを水平にスクロールできるjQueryプラグイン「jquery.horizonScroll.js」

公開日：2016/01/13

jQuery スクロールプラグイン

コンテンツを水平にスクロールできるjQueryプラグイン「jquery.horizonScroll.js」

ホームページのコンテンツをスクロールするだけで切り替えるjQueryのプラグインは多々あります。

今回紹介するのはコンテンツごと水平にスクロールすることができるプラグインです。

jquery.horizonScroll.jsのデモサイト

スクロールすると左右にコンテンツがスライドします。
WEBサイトに載せる内容によっては、このようなスライドさせる見せ方も面白いと思います。

導入も簡単なのでチェックしてみてください。

「jquery.horizonScroll.js」で水平スクロール

下記ページから「jquery.horizonScroll.js」をダウンロードします。

https://github.com/trgraglia/jquery.horizonScroll.js

ファイル読込

「jquery.horizonScroll.js」を動作するのに必要なファイルを読み込みます。

<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.horizonScroll.js"></script>

HTML

コンテンツごとに水平スクロールさせるsectionを用意します。
また、左右に表示される矢印を記述します。

<div class="horizon-prev"><img src="images/l-arrow.png"></div>
<div class="horizon-next"><img src="images/r-arrow.png"></div>

<section data-role="section" id="section-section1"></section>
<section data-role="section" id="section-section2"></section>
<section data-role="section" id="section-section3"></section>
<section data-role="section" id="section-section4"></section>

JS

水平スクロールさせるコンテンツを指定し「jquery.horizonScroll.js」を実行します。
下記はデフォルトの状態です。
オプションでスクロールのスピードなども調節できます。

<script type="text/javascript">
$(function () {
	$('section').horizon();
});
</script>

$(function () {

$('section').horizon();

});

</script>

CSS

「style.css」の下記の箇所で各セクションの背景色を変更できます。

#section-section1 {
	background:#2c3e50;
}
#section-section2 {
	background:#16a085;
}
#section-section3 {
	background:#27ae60;
}
#section-section4 {
	background:#c0392b;
}