Diese Woche habe ich in einem TYPO3 Projekt was das Framework Bootstrap verwendet einen Bootstrap Carousel Slider in die tx_news eingebunden.
Hier möchte ich Euch kurz beschreiben wie Ihr selbst das Bootstrap Carousel in die Extension einbauen könnt: http://getbootstrap.com/javascript/#carousel

Als Erstes muss natürlich das Bootstrap Framework richtig im TYPO3 eingebunden werden. Dann gehen wir an die tx_news Templates dran.
Die Datei: FalMediaContainer.html müssen wir als Erstes bearbeiten und eine Abfrage einbauen, dass ein anderes Template verwendet wird, sobald mehr als ein Bild eingebunden wurde.

FalMediaContainer.html

<f:if condition="{media}">
	<!-- fal media files -->
	<div class="news-img-wrap">

		<f:if condition="{media -> f:count()} == 1">
			<f:then>
				<f:for each="{media}" as="mediaElement">
					<div class="outer">
						<f:if condition="{mediaElement.originalResource.type} == 2">
							<f:render partial="Detail/FalMediaImage" arguments="{mediaElement: mediaElement, settings:settings}"/>
						</f:if>
						<f:if condition="{mediaElement.originalResource.type} == 4">
							<f:render partial="Detail/FalMediaVideo" arguments="{mediaElement: mediaElement, settings:settings}"/>
						</f:if>
					</div>
				</f:for>
			</f:then>
			<f:else>
				<div id="carousel-news" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					<f:for each="{media}" as="mediaElement" iteration="iterator">
						<li data-target="#carousel-news" data-slide-to="{iterator.index}" class="{f:if(condition:'{iterator.isFirst} == 1',then:'active')}"></li>
					</f:for>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<f:for each="{media}" as="mediaElement" iteration="iterator">
							<f:if condition="{mediaElement.originalResource.type} == 2">
								<f:render partial="Detail/FalMediaImageSlider" arguments="{mediaElement: mediaElement, settings:settings, iterator:iterator}"/>
							</f:if>
						</f:for>
					</div>
				</div>
			</f:else>
		</f:if>
	</div>
</f:if>

Mit der Condition condition="{media -> f:count()} == 1" frage ich ab, ob es mehr als ein Bild gibt.
Sollte es mehr als ein Bild geben, verweise ich auf das „else“ und habe dort einen Teil des Bootstrap Carousel HTML´s eingebaut. Die for each Schleife verweise ich auf eine neue File: Detail/FalMediaImageSlider
Die Indicators erstelle ich mit einer zusätzlichen for each Schleife und einem iterator.index auf, damit wir ab der 0 den Iterator hochzählen.
Sollte es weniger als 2 Bilder geben, dann verweise ich auf die bekannte Datei: Detail/FalMediaImage hin.

Hier der Aufbau für die FalMediaImageSlider Datei:

<div class="item {f:if(condition:'{iterator.isFirst} == 1',then:'active')}">
	<div class="mediaelement mediaelement-image">
		<f:if condition="{settings.detail.media.image.lightbox}">
			<f:then>
				<a rel="{settings.detail.media.image.lightbox}" title="{mediaElement.title}" href="{f:uri.image(src:'{mediaElement.uid}' treatIdAsReference:1 maxWidth:'800')}">
					<f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" class="img-responsive" />
				</a>
			</f:then>
			<f:else>
				<f:if condition="{mediaElement.link}">
					<f:then>
						<f:format.html parseFuncTSPath="lib.parseFuncNews">
							<link {mediaElement.link}>
							<f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" class="img-responsive" />
							</link>
						</f:format.html>
					</f:then>
					<f:else>
						<f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" class="img-responsive" />
					</f:else>
				</f:if>
			</f:else>
		</f:if>
	</div>
	<f:if condition="{mediaElement.description}">
		<p class="news-img-caption">
			{mediaElement.description}
		</p>
	</f:if>
</div>

Da der Bootstrap Slider eine „active“ Class für das erste Element benötigt, habe ich im ersten Teil eine Condition eingebunden: {f:if(condition:'{iterator.isFirst} == 1',then:'active')} .
Der restliche HTML/Fluid-Code sieht der org. Datei sehr ähnlich.
Diese kann natürlich nach belieben angepasst und umgebaut werden, wichtig das Ihr den Div-Container class="item" beibehaltet!