[TASK] Slider Container, add option to control pagination position (#222

) * [TASK] Slider Container, add option to controll pagination position * [FIX] fix description
t3kit · Jun 8, 2017 · 7fdaede · 7fdaede
1 parent e4cf7fb
commit 7fdaede
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/Configuration/GridElements/FlexForms/SliderContainer.xml b/Configuration/GridElements/FlexForms/SliderContainer.xml
@@ -28,6 +28,15 @@
 							</config>
 						</TCEforms>
 					</paggination>
+					<paginationPosition>
+						<TCEforms>
+							<label>LLL:EXT:theme_t3kit/Resources/Private/Language/GridElements.xlf:slider_container.flexform.paginationPosition</label>
+							<config>
+								<type>check</type>
+								<default>1</default>
+							</config>
+						</TCEforms>
+					</paginationPosition>
 					<loop>
 						<TCEforms>
 							<label>LLL:EXT:theme_t3kit/Resources/Private/Language/GridElements.xlf:slider_container.flexform.loop</label>

diff --git a/Resources/Private/Language/GridElements.xlf b/Resources/Private/Language/GridElements.xlf
@@ -306,6 +306,9 @@
 			<trans-unit id="slider_container.flexform.pagination">
 				<source>Show/hide pagination</source>
 			</trans-unit>
+			<trans-unit id="slider_container.flexform.paginationPosition">
+				<source>Change pagination position (outside/inside of container)</source>
+			</trans-unit>
 			<trans-unit id="slider_container.flexform.loop">
 				<source>Loop (continuous loop mode)</source>
 			</trans-unit>

diff --git a/Resources/Private/Templates/GridElements/SliderContainer.html b/Resources/Private/Templates/GridElements/SliderContainer.html
@@ -5,7 +5,7 @@
 			<div class="row">
 				<div class="col-md-12">
 	</f:if>
-	<div class="slider-container slider-container-{f:if(condition: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', then: 'effect', else: 'default')}">
+	<div class="slider-container slider-container-{f:if(condition: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', then: 'effect', else: 'default')} {f:if(condition: '{data.pi_flexform.data.columns.lDEF.paginationPosition.vDEF}', then: '_pagination-outside', else: '_pagination-inside')}">
 		<div class="swiper-container slider-container__container js__slider-container__container" data-autoplay="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.autoplay.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.autoplay.vDEF}')}" data-loop="{f:if(condition: data.pi_flexform.data.columns.lDEF.loop.vDEF, then: 'loop')}" data-effect="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', else: 'slider')}" data-slidesperview="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.slidesPerView.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.slidesPerView.vDEF}', else: 3)}" data-speed="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.speed.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.speed.vDEF}', else: 300)}">
 			<div class="swiper-wrapper slider-container__wrapper js__slider-container__wrapper">
 				<f:format.raw>{data.tx_gridelements_view_column_0}</f:format.raw>

diff --git a/felayout_t3kit/dev/styles/main/contentElements/sliderContainer.less b/felayout_t3kit/dev/styles/main/contentElements/sliderContainer.less
@@ -53,7 +53,8 @@
 }
 
 .slider-container__pagination {
-    bottom: -20px;
+    font-size: 0;
+    padding: 10px 0;
     width: 100%;
 }
 
@@ -87,3 +88,11 @@
         margin: 0 auto;
     }
 }
+
+._pagination-inside .slider-container__pagination {
+    bottom: 10px;
+}
+
+._pagination-outside .slider-container__pagination {
+    position: static;
+}