Demos: o-gallery active

Select Full Code Snippet

<p>Single</p>
<div class="o-gallery" data-o-component="o-gallery" data-o-gallery-captionminheight="30" data-o-gallery-captionmaxheight="50">
	<h1 class="o-gallery__title">Gallery title</h1>
	<ol class="o-gallery__items">
			<li class="o-gallery__item" aria-selected="true">
				<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/c6bb1407-b0fc-4cc6-8f9f-af838349595e.img"></div>
				<div class="o-gallery__item__caption">Ukrainian soldiers guard a gate of an infantry base in Privolnoye, Ukraine</div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/ed8abc52-eb10-4cd2-91ae-ba0ddc88863e.img"></div>
				<div class="o-gallery__item__caption">A Russian flag flies behind armed personnel on top of a Russian army vehicle outside a Ukrainian border guard post in Balaclava</div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/05c4639c-9023-4239-b8c1-63ade8e0e230.img"></div>
				<div class="o-gallery__item__caption">A Russian convoy heads towards Simferopol, the regional capital of Ukraines Crimea region</div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/6470af55-ea40-46dc-be82-e409c85600fe.img"></div>
				<div class="o-gallery__item__caption">Ukrainians hold placards as they gather near the US consulate in Kiev</div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/049c7ee7-a4de-48cb-b1a5-0ec80fee4f37.img"></div>
				<div class="o-gallery__item__caption">President Barack Obama talks on the phone in the Oval Office with Russia&#x2019;s President Vladimir Putin about the situation in Ukraine</div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/5d5bc53b-6ad7-42eb-bca2-ed90038b6d71.img"></div>
				<div class="o-gallery__item__caption">The UN Security Council meets to discuss the situation in Ukraine</div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/5f2697c4-9536-4ed2-adc3-3e927da67059.img"></div>
				<div class="o-gallery__item__caption">Vitaly Churkin, Russian ambassador to the UN, waits for the security council meeting on the situation in Ukraine to start</div>
			</li>
	</ol>
</div>
<p>Multiple</p>
<div class="o-gallery demo__multi" data-o-component="o-gallery" data-o-gallery-multipleitemsperpage="true">
	<ol class="o-gallery__items">
			<li class="o-gallery__item" aria-selected="true">
				<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/bf78da6c-8e79-493a-8af6-11db6ee66666.img"></div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/5cc3255f-a5aa-402a-9304-a2dded21ae74.img"></div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/66c8be19-8448-46b9-8eb7-1cb322af1192.img"></div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/a32c6bb6-73cd-4f44-ab45-7cfb4a37650e.img"></div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/eefd0b95-5600-4d52-ab08-56b3ae538778.img"></div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/d7bca44e-d443-42f6-9c26-bf9a3a2cf3d8.img"></div>
			</li>
			<li class="o-gallery__item">
				<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/007f9ce2-4e8b-46a2-9301-2ef88636c974.img"></div>
			</li>
	</ol>
</div>