tx_news template

Hallo Forum,

ich würde gerne gerne tx_news in das Bootstrap Carousel initigrieren.
Jetzt stehe ich vor dem Problem das die ersten x Einträge mit der class="item active" ausgegeben werden sollen und die Restlichen mit der class="item".

<f:section name="content">
	<!--TYPO3SEARCH_end-->
	<f:if condition="{settings.templateLayout} == 0"><!--jens-->
		<f:if condition="{news}">
			<f:then>
				<div class="news-list-view">
					<f:if condition="{settings.hidePagination}">
						<f:then>
							<f:for each="{news}" as="newsItem" iteration="iterator">
								<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
							</f:for>
						</f:then>
						<f:else>
							<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit}">
								<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
									<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
								</f:for>
							</n:widget.paginate>
						</f:else>
					</f:if>
				</div>
			</f:then>
			<f:else>
				<div class="no-news-found">
					<f:translate key="list_nonewsfound" />
				</div>
			</f:else>
		</f:if>
	</f:if><!--jens-->
	<f:if condition="{settings.templateLayout} == 1"><!--jens-->
		<f:if condition="{news}">
			<f:then>
				<div id="carousel-homepage-latestnews" class="carousel slide" data-ride="carousel">
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<f:if condition="{settings.hidePagination}">
								<f:then>
									<f:for each="{news}" as="newsItem" iteration="iterator">
										<f:render partial="List/Item1" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
									</f:for>
								</f:then>
								<f:else>
								<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit}">
									<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
										<f:render partial="List/Item1" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
									</f:for>
									</n:widget.paginate>
								</f:else>
							</f:if>
						</div>
					</div>
					<a class="left carousel-control" href="#carousel-homepage-latestnews" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#carousel-homepage-latestnews" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</f:then>
			<f:else>
				<div class="no-news-found">
					<f:translate key="list_nonewsfound" />
				</div>
			</f:else>
		</f:if>
	</f:if><!--jens-->
	<!--TYPO3SEARCH_begin-->
</f:section>

Leider finde ich keinen Ansatz wie ich das umsetzten kann.

Viele Grüße Jens

Hallo,

so bin jetzt einen Schritt weiter.

<f:for each="{news}" as="newsItem" iteration="iterator">
              <f:if condition="{iterator.index}==0">
                <f:then>
                  <div class="item active">
                    <f:render partial="List/Item1" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
                </f:then>
                <f:else>
                  <f:if condition="{iterator.index}==3">
                    <f:then>
                      </div>
                      <div class="clear"></div>
                      <div class="item">
                        <f:render partial="List/Item1" arguments="{newsItem:newsItem,settings:settings,iterator:iterator}" />
                      </div>
                    </f:then>
                    <f:else>
                      <f:render partial="List/Item1" arguments="{newsItem:newsItem,settings:settings,iterator:iterator}" />
                    </f:else>
                  </f:if>
                </f:else>
              </f:if>
            </f:for>

Eigentlich möchte ich das die ersten 4 Elemente mit der class="item active" versehen werden und der Rest mit class="item" geht das auch einfacher oder ist das der richtige Ansatz.

Danke und Viele Grüße

Hallo Jens, darf ich fragen wie du das letztendlich gelöst hast, würde nämlich auch gerne tx_news auf der Startseite (also die Listenansicht) in ein Bootstrap Carousel einbauen und habe irgendwie Probleme mit den items, bei mir sollen auch die ersten 3 die Klasse active bekommen. Wäre super wenn du mir weiterhelfen könntest. Lg