Bootstrap 3 Carousel with Modal popup for NoNumber Snippets in combination with User Agent Detector, NoNumber Sourcerer and NoNumber Articles Anywhere. use: {snippet carousel|category-alias}

snippet-bs3-carousel.html

{source 0}
<?php 
function getCarouselContentByLayout($layout, $title = '', $text = '', $count = 0)
{
  if($layout == 'mobile') {
    return '<div class="carousel-caption carousel-caption-mobile">'
    . '<strong>' . $title . '</strong>'
    . '<p><a href="#myModal-' . $count .'" data-toggle="modal">lees meer</a></p>'
    . '</div>';
  }
  
  return '<div class="carousel-caption"><strong>' . $title . '</strong> - ' . $text . '</div>';
}

function getCarouselModalContentByLayout($layout, $title = '', $text = '', $count = 0 )
{
  if($layout != 'mobile') {
     return '';
  }

  return '<div class="modal fade" id="myModal-' . $count . '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-' . $count . '" aria-hidden="true" >'
  .'	<div class="modal-dialog">'
  .'		<div class="modal-content">'
  .'			<div class="modal-header">'
  .'				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>'
  .'				<h4 class="modal-title" id="myModalLabel-' . $count . '" itemprop="name">' . $title . '</h4>'
  .'			</div>'
  .'			<div class="modal-body">'
  .'				' . $text
  .'			</div>'
  .'		</div>'
  .'	</div>'
  .'</div>';
}
?>
{/source}
<div id="carousel-generic" class="carousel carousel-byte slide" data-ride="carousel" data-interval="10000">
	<ol class="carousel-indicators">
	{articles cat:ordering:\1}
		<li data-target="#carousel-generic" data-slide-to="{source 1}<?php echo ({count} - 1); ?>{/source}" class="{if:count=1}active{/if}"></li>
	{/articles}
	</ol>
	<div class="carousel-inner" role="listbox">
	{articles cat:ordering:\1}
		<div class="item{if:count=1} active{/if}">
			<img src="{image_intro}" alt="feature {title}" />
			{source 0}<?php	echo getCarouselContentByLayout(JFactory::getSession()->get('ualayout'),'{title}','{text}','{count}');?>{/source}
		</div>
	{/articles}
	</div>
	<a href="#carousel-generic" class="left carousel-byte-control btn btn-success" role="button" data-slide="prev"><span class="fa fa-chevron-left" aria-hidden="true"></span><span class="sr-only">Vorige</span></a>
	<a href="#carousel-generic" class="right carousel-byte-control btn btn-success" role="button" data-slide="next"><span class="fa fa-chevron-right" aria-hidden="true"></span><span class="sr-only">Volgende</span></a>
</div>

{articles cat:ordering:\1}
{source 0}<?php	echo getCarouselModalContentByLayout(JFactory::getSession()->get('ualayout'),'{title}','{text}','{count}');?>{/source}
{/articles}