SignalR で Html プレゼン jQueryプラグイン Ascensor.js http://kirkas.ch/ascensor/#/Home を使用しています

Audience Html

<div id="ascensorBuilding">
  <section>
		<article>
			<h2>1 Getting Started</h2>
			<h3>Contents...</h3>
		</article>
	</section>
	<section>
		<article>
			<h2>2 Creating Web APIs</h2>
			<h3>Contents...</h3>
		</article>
	</section>
	<section>
		<article>
			<h2>3 Web API Clients</h2>
			<h3>Contents...</h3>
		</article>
	</section>
	<section>
		<article>
			<h2>4 Routing and Actions</h2>
			<h3>Contents...</h3>
		</article>
	</section>
	<section>
		<article>
			<h2>5 Formats and Model Binding</h2>
			<h3>Contents...</h3>
		</article>
	</section>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery.ascensor.js"></script>
<script src="~/Scripts/jquery.signalR-1.1.0.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">

	$('#ascensorBuilding').ascensor({
		AscensorName: 'ascensor',
		ChildType: 'section'
	});

	$.connection.hub.start();

	var remoteHub = $.connection.remoteHub;

	//前のスライドへ
	remoteHub.client.prev = function () {
		$('#ascensorBuilding').trigger({
			type: "ascensorUp",
			floor: 1
		});
	};

	//次のスライドへ
	remoteHub.client.next = function () {
		$('#ascensorBuilding').trigger({
			type: "ascensorDown",
			floor: 1
		});
	};

	//指定した番号のスライドへ
	remoteHub.client.slideNumber = function (slideNumber) {
		$('#ascensorBuilding').trigger("target", slideNumber);
	};
	
</script>
		

SignalR Html プレゼン Hub クラス

using Microsoft.AspNet.SignalR;

namespace SignalRSlide.Hubs
{
  public class RemoteHub : Hub
	{
		public void NotifyNext()
		{
			// 次のスライドへ移動する指示を全員へ送信
			Clients.All.Next();
		}

		public void NotifyPrev()
		{
			// 前のスライドへ移動する指示を全員へ送信
			Clients.All.Prev();
		}

		public void NotifySlideNumber(int slideNumber)
		{
			// 指定したスライドへ移動する指示を全員へ送信
			Clients.All.SlideNumber(slideNumber);
		}
	}
}

Speakers Html

<div class="prev remote">←</div>
<div class="next remote">→</div>
<ul class="remote">
  <li data-number="1">1 Getting Started</li>
	<li data-number="2">2 Creating Web APIs</li>
	<li data-number="3">3 Web API Clients</li>
	<li data-number="4">4 Routing and Actions</li>
	<li data-number="5">5 Formats and Model Binding</li>
</ul>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery.signalR-1.1.0.js" type="text/javascript"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
	$.connection.hub.start();

	var remoteHub = $.connection.remoteHub;

	//次のスライドへ
	$(".next").on("click", function () {
		remoteHub.server.notifyNext();
	});

	//前のスライドへ
	$(".prev").on("click", function () {
		remoteHub.server.notifyPrev();
	});

	//指定した番号のスライドへ
	$("li").on("click", function (e) {
		remoteHub.server.notifySlideNumber($(this).attr('data-number'));
	});

</script>