Swiper  

    bh
    Swiper-Element

    Content-Element, in welches weitere Content-Elemente abgelegt werden können. Diese werden als Swiper ausgegeben.

    HTML-Template: el-swiper.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:tmpl.element object="{cObj}"> <bh:swiper settings="{cObj.allSettings.swiper}"> <bh:tmpl.content section="el-swiper" parent="{cObj.uid}" /> </bh:swiper> </bh:tmpl.element>
    HTML-Template (Children): el-swipe-item/el-swipe-item.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:tmpl.element object="{cObj}"> <bh:tmpl.content section="el-swipe-item" parent="{cObj.uid}" /> </bh:tmpl.element>
    Typoscript: el-swiper.typoscript
    TYPOSCRIPT
    plugin.tx_bh.settings.contentElements.el-swiper < abstract.bhElement plugin.tx_bh.settings.contentElements.el-swiper { name = Swiper description = Inhalt kann horizontal angeordnet werden templateFile = el-swiper.html templatePath = typo3conf/ext/bh/Resources/Public/Elements/el-swiper/ settingsForm = EXT:bh/Resources/Public/Elements/el-swiper/el-swiper-settings.html iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/fader.svg bheListgroup = 1 hidden = 1 options { oncreate = advanced translate = 0 edit = 0 newElement = el-swipe-item } swiper { min-height = 300px spaceBetween = 0px slideMinWidth = 1 } userClass = bh-centered } bh.page.includeCSS { el-swiper = EXT:bh/Resources/Public/Elements/el-swiper/el-swiper.css } [bh.isMobile] bhDefaultMobilePage.includeCSS { el-swiper < page.includeCSS.el-swiper } [global] @import 'EXT:bh/Resources/Public/Elements/el-swiper/el-swipe-item/el-swipe-item.typoscript'
    Typoscript (Children): el-swipe-item/el-swipe-item.typoscript
    TYPOSCRIPT
    plugin.tx_bh.settings.contentElements.el-swipe-item < abstract.bhElement plugin.tx_bh.settings.contentElements.el-swipe-item { name = Swipe Item description = Kind Element des Swiper-Elementes templateFile = el-swipe-item.html templatePath = typo3conf/ext/bh/Resources/Public/Elements/el-swiper/el-swipe-item/ settingsForm = EXT:bh/Resources/Public/Elements/el-swiper/el-swipe-item-settings.html iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/filled.svg hidden = 1 link = 0 options { settings = 0 translate = 0 edit = 0 copy = 0 moveable = 0 } userClass = swiper-slide } bh.page.includeCSS.el-swipe-item = EXT:bh/Resources/Public/Elements/el-swiper/el-swipe-item/el-swipe-item.css [bh.isMobile] bhDefaultMobilePage.includeCSS.el-swipe-item < page.includeCSS.el-swipe-item [global]
    Settings-HTML: el-swiper-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:form.settingsform content="{cObj}"> <div class="bhe-tab-box"> <div class="bhe-tab-toggler-box bhe-tab-toggler-style-icon-text"> <div class="bhe-tab-toggler bhe-tab-active"> <div class="bhe-tab-toggler-icon bhe-font-fader"></div> <div class="bhe-tab-toggler-text">Swiper</div> </div> <div class="bhe-tab-toggler"> <div class="bhe-tab-toggler-icon bhe-font-form"></div> <div class="bhe-tab-toggler-text">Settings</div> </div> </div> <div class="bhe-tab-content-box"> <div class="bhe-tab-content bhe-tab-content-padding bhe-tab-active"> <div class="bhe-formsettings-option"> <label>Effekt</label> <f:form.select name="swiper[effect]" value="{cObj.allSettings.swiper.effect}" options="{slide:'Slide',fade:'Fade'}" /> </div> <div class="bhe-formsettings-option"> <label>Navigation - Pfeile</label> <f:form.checkbox name="swiper[navigation]" value="1" checked="{cObj.allSettings.swiper.navigation}" /> </div> <div class="bhe-formsettings-option"> <label>Navigation - Punkte</label> <f:form.checkbox name="swiper[pagination]" value="1" checked="{cObj.allSettings.swiper.pagination}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="wenn leer wird keine Mindesthöhe verwendet" data-tooltip-view="extended">Mindesthöhe (px,%,vh)</label> <f:form.textfield name="swiper[min-height]" value="{cObj.allSettings.swiper.min-height}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="wenn leer wird als Default-Wert 0px verwendet" data-tooltip-view="extended">Platz zwischen den Spalten (px)</label> <f:form.textfield name="swiper[spaceBetween]" value="{cObj.allSettings.swiper.spaceBetween}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="<b>- '2' ganzzahlige Werte</b><br/>gibt die Spaltenanzahl an<br/><b>- '300px' Werte mit dem Zusatz 'px'</b><br/> gibt die Mindestbreite an (automatische Berechnung)<br/><b>- 'auto'</b><br/> Breite wird über CSS definiert (für Profis)" data-tooltip-view="extended">Spalten Einstellung</label> <f:form.textfield name="swiper[slideMinWidth]" value="{cObj.allSettings.swiper.slideMinWidth}" /> </div> <div class="bhe-formsettings-option"> <label>Spalten ausmitteln</label> <f:form.checkbox name="swiper[centeredSlides]" value="1" checked="{cObj.allSettings.swiper.centeredSlides}" /> </div> <div class="bhe-formsettings-option"> <label>Loop (Elemente wiederholen sich)</label> <f:form.checkbox name="swiper[loop]" value="1" checked="{cObj.allSettings.swiper.loop}" /> </div> <div class="bhe-formsettings-option"> <label>Autoplay</label> <f:form.checkbox name="swiper[autoplay]" value="1" checked="{cObj.allSettings.swiper.autoplay}" /> </div> <div class="bhe-formsettings-option"> <labeldata-tooltip-view="extended">Autoplay Dauer in Sekunden</label> <input type="number" step="0.01" name="tx_bh_page[data][content][settings][swiper][autoplayOptions][delay]" min="0" value="{cObj.allSettings.swiper.autoplayOptions.delay}" /> </div> </div> <div class="bhe-tab-content bhe-tab-content-padding"> <!-- STYLES --> <f:if condition="{cObj.allSettings.styleOptions.classes}"> <div class="bhe-formsettings-option"> <label>Styles</label> <f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" /> </div> </f:if> <bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" /> </div> </div> </div> <f:form.submit value="Speichern" /> </bh:form.settingsform>
    Settings-HTML (Children): el-swipe-item/el-swipe-item-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:form.settingsform content="{cObj}"> <f:if condition="{cObj.allSettings.styleOptions.classes}"> <div class="bhe-formsettings-option"> <label>Styles</label> <f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" /> </div> </f:if> <div class="bhe-formsettings-option"> <label>Breite des Elements</label> <f:form.select name="style[width]" value="{cObj.allSettings.style.width}" options="{cObj.allSettings.styleOptions.width}" /> </div> <f:form.submit value="Speichern" /> </bh:form.settingsform>