カスタムリストの中身をコンテンツスライダーで表示してみた

夏休みボケがまだ直らない感じなので、お遊びネタを一つ。

若干時代遅れ感ありつつも、まだまだ世の中のwebサイトでよく見かけるコンテンツスライダー。
これをSharePointのページに表示させたりしたらかっちょいいのでは・・・と、SharePoint2013で息抜きがてらに作ってみました。

BHvfSMH3t5K
コンテンツスライダーは、こちらのjQueryプラグインを利用しています。設置がとても簡単なうえ、オプションも多数あり、とても使い勝手がよいです。
jQuery Content Slider | Responsive jQuery Slider | bxSlider.

表示させる中身は以下のようなカスタムリストに登録し、RESTサービスを利用して引っ張ってきています。
リスト名:SliderContents
列:
Title(1行テキスト)
Caption(1行テキスト、画像にオーバーレイで表示させるキャプション)
contentURL(1行テキスト、画像をクリックしたら飛んでいく先)
imageURL(1行テキスト、スライダーに表示させる画像のURL)

ソースコードです。

JavaScript

$(function () {
	$("#main-slider").empty();
	$.ajax({
		url: "/[your site]/_api/web/lists/getbytitle('SliderContents')/items?$select=*", 
		method: "GET", 
		headers: { "Accept": "application/json; odata=verbose" },
		success : function(data){
			var liHtml = "<ul class='bxslider'>";
			$.each(data.d.results, function(index, item){
				liHtml += "<li><a href='" + item.contentURL + "'>";
				liHtml += "<img src='" + item.imageURL + "' alt='" + item.Title + "' title='" + item.Caption + "' />";
				liHtml += "</a></li>";
			}); //end each
			liHtml += "</ul>";
			$("#main-slider").append(liHtml);
			$(".bxslider").bxSlider({
				captions: true,
				auto: true,
				autoControls: true,
				autoHover: true,
				pager: false
			});
		},
	});
});

HTML(こちらをスクリプトエディタwebパーツでページに埋め込みます)

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/[your site]/Lib/jquery.bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/[your site]/Lib/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="/[your site]/Lib/slider/SliderSample.js" ></script>
<div id="main-slider">
</div>

ほとんどSharePointとは関係ない世界にはいってるような気もしますが・・・ご参考まで。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中