Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
news und Carousel
#1
Hallo,
hab mit die news ext. mal in ein Carousel gepack das horizontal 4 Kästen mit Info ausgiebt und automatisch die nächsten 4...
Leider bekomme ich keine 4 Kästen ausgegeben sondern nur 1 und der rest bleibt leer...
Irgendwie muss ich dem FluidTemplate sagen das es mir 4 news Kästen nebeneinander ausgiebt und die in die Klasse <div class="item active"><div class="row"> reinpackt und nicht wie jetzt jedes einzeln...
Nur wie stellt man das an?

Weis das eventuell jemand und kann mir dabei helfen?
Danke schon mal für Eure Mithilfe!

Hier mal mein List.html
PHP-Code:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
     
 xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
     
 data-namespace-typo3-fluid="true">
<
f:layout name="General" />
<!--
    =====================
        
Templates/News/List.html
-->

<
f:section name="content">
    <
f:if condition="{contentObjectData.colPos} == 1">
    <!--
TYPO3SEARCH_end-->
        <
f:then>
            <
f:if condition="{news}">
                <
f:then>

                    <
div class="news-list-view" id="news-container-{contentObjectData.uid}">
                        <
header id="myCarousel" class="carousel slide">
                            <
div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <
div class="carousel-inner" role="listbox">

                                    <
f:if condition="{settings.hidePagination}">
                                        <
f:then>
                                            <
f:for each="{news}" as="newsItem" iteration="iterator">
                                                <
div class="item {f:if(condition:'{iterator.isFirst} == 1',then:'active')}">
                                                    <
div class="row">
                                                        <
f:render partial="List/Item1" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
                                                    </
div>
                                                </
div>

                                            </
f:for>
                                        </
f:then>
                                        <
f:else>
                                            <
n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit,recordId:contentObjectData.uid}">
                                                <
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>

                                <
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                    <
span  aria-hidden="true"><class="fa fa-caret-square-o-left"></i></span>
                                    <
span class="sr-only">Previous</span>
                                </
a>
                                <
class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                    <
span  aria-hidden="true"><class="fa fa-caret-square-o-right"></i></span>
                                    <
span class="sr-only">Next</span>
                                </
a>
                            </
div>
                        </
header>
                    </
div>

                </
f:then>
                <
f:else>
                    <
div class="no-news-found">
                        <
f:translate key="list_nonewsfound" />
                    </
div>
                </
f:else>
            </
f:if>
        </
f:then>

        <
f:comment>Normale Ausgabe</f:comment>

        <
f:else>
            <
f:if condition="{news}">
                <
f:then>
                    <
div class="news-list-view" id="news-container-{contentObjectData.uid}">
                        <
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,recordId:contentObjectData.uid}">
                                    <
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:else>

    <!--
TYPO3SEARCH_begin-->
    </
f:if>
</
f:section>
</
html

und noch das Item1.html
PHP-Code:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
 
     xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
 
     data-namespace-typo3-fluid="true">
<!--
    =====================
        
Partials/List/Item1.html
-->


 
   <div class="col-md-3 col-sm-6 article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
 
       <n:excludeDisplayedNews newsItem="{newsItem}"/>

 
           <div class="panel panel-default text-center">

 
               <f:if condition="{newsItem.mediaPreviews}">
 
                   <!-- media preview element -->
 
                   <f:then>
 
                       <div class="panel-heading">
 
                           <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
 
                               <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
 
                                   <f:if condition="{mediaElement.originalResource.type} == 2">
 
                                       <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
 
                                   </f:if>
 
                                   <f:if condition="{mediaElement.originalResource.type} == 4">
 
                                       <f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
 
                                   </f:if>
 
                                   <f:if condition="{mediaElement.originalResource.type} == 5">
 
                                       <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
 
                                   </f:if>
 
                               </f:alias>
 
                           </n:link>
 
                       </div>
 
                   </f:then>

 
                   <f:else>
 
                       <f:if condition="{settings.displayDummyIfNoMedia}">
 
                           <div class="panel-heading">
 
                               <span class="no-media-element">
 
                                   <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
 
                                       <f:image src="{settings.list.media.dummyImage}" title="" alt="" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
 
                                   </n:link>
 
                               </span>
 
                           </div>
 
                       </f:if>
 
                   </f:else>
 
               </f:if>

 
               <!-- body -->
 
               <div class="panel-body">
 
                   <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
 
                       <h4>{newsItem.title}</h4>
 
                   </n:link>

 
                   <n:removeMediaTags>
 
                       <f:if condition="{newsItem.teaser}">
 
                           <f:then>
 
                               <div itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters'{settings.cropMaxCharacters}'respectWordBoundaries:'1') -> f:format.html()}</div>
 
                           </f:then>
 
                           <f:else>
 
                               <div itemprop="description">{newsItem.bodytext -> f:format.crop(maxCharacters'{settings.cropMaxCharacters}'respectWordBoundaries:'1') -> f:format.html()}</div>
 
                           </f:else>
 
                       </f:if>
 
                   </n:removeMediaTags>

 
                   <n:link newsItem="{newsItem}" settings="{settings}" class="btn btn-primary" title="{newsItem.title}">
 
                       <f:translate key="more-link"/> <class="fa fa-chevron-right"></i>
 
                   </n:link>
 
               </div>
 
           </div>

 
   </div>

</
html
Zitieren
#2
Komm nicht weiter...
ich verstehe nicht weshalb die einstellung im PlugIn auch nix nutzt "Einträge pro Seite" da habe ich 4 reingeschrieben und trotzdem giebt er nur eines aus also muß es am Fluid liegen weil ohne der my Carousel einbindung in das Fluidtemplate funktioniert das ja auch.

Der jetzige QuellCode sieht so aus und das kann garnicht richtig sein:
PHP-Code:
<header id="myCarousel" class="carousel slide">
    <
div id="myCarousel" class="carousel slide" data-ride="carousel">
        <
div class="carousel-inner" role="listbox">

            <
div class="item active">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

            <
div class="item ">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

            <
div class="item ">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

            <
div class="item ">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

            <
div class="item ">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

            <
div class="item ">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

            <
div class="item ">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

            <
div class="item ">
                <
div class="row">
                    <
div class="col-md-3 col-sm-6 article articletype-0">
                        <!-- 
Inhallt OK -->
                    </
div>
                </
div>
            </
div>

        </
div>

        <
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
        <
class="right carousel-control" href="#myCarousel" role="button" data-slide="next"></a>

    </
div>
</
header


Uns so soll der Code aussehen:
PHP-Code:
<header id="myCarousel" class="carousel slide">
 
 <div id="myCarousel" class="carousel slide" data-ride="carousel">
 
   <div class="carousel-inner" role="listbox">

<!-- die 
ersten 4 news active -->
 
     <div class="item active">
 
       <div class="row">

 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>

 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>

 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>
 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>
 
       </div>
 
     </div>

<!-- die 
nächsten 4 news -->
 
     <div class="item">
 
       <div class="row">
 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>
 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>
 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>
 
         <div class="col-md-3 col-sm-6">
 
           <!-- Inhallt OK -->
 
         </div>
 
       </div>
 
     </div>

 
   </div>

 
   <class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
 
   <class="right carousel-control" href="#myCarousel" role="button" data-slide="next"></a>

 
 </div>
</
header

Da sieht man ganz deutlich den Unterschied das <div class="item active"><div class="row"> wickelt alle 4 <div class="col-md-3 col-sm-6"> ein so soll das auch sein...
Und bei mir wird jedes <div class="col-md-3 col-sm-6"> in ein eigenes <div class="item active"><div class="row"> gewickelt hier ist der Fehler begraben...
Nur wie korrigiere ich das weil ich kann ja nicht vor dem <f:for each="{news}" as="newsItem" iteration="iterator"> mit dem <div class="item active{f:if(condition:'{iterator.isFirst}== 1',then:'active')}"><div class="row"> beginnen das wäre falsch.

Hat nicht schon jemand das problem irgendwan mal gelöst im Netzt finde ich nichts darüber kommt mir auch sehr komisch vor.
Oder es ist so banal das es keinen interessiert und nur ich komm nicht dahinter Huh
Zitieren
#3
So... Mir hat es entgültig gereicht mit dem Carousel von Bootstrap!
Ich habe jetzt das slick.js eingebunden, und es war eine Aktion von ca. 15min.
Es bleibt mir ein Räzel wie man das mit Carousel macht.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste