[TASK] Adjust columns and slider dots

Configuration/FlexForms/Latest.xml

@@ -152,7 +152,7 @@
 								<mode>userOverridePlaceholder</mode>
 								<range>
 									<lower>1</lower>
-									<upper>4</upper>
+									<upper>3</upper>
 								</range>
 							</config>
 						</TCEforms>

Resources/Private/Templates/Latest/Index.html

@@ -12,7 +12,8 @@
 </f:section>
 
 <f:section name="layout-content">
-	<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-layout--{settings.layout}" data-interval="0"
+	<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-layout--{settings.layout}"
+		 data-interval="0" data-current-columns="1"
 		 data-columns="{f:if(condition: '{newsMetaData -> f:count()} > {settings.columns}}', then: '{settings.columns}', else: '{newsMetaData -> f:count()}')}">
 		<div class="sg-slide-track">
 			<div class="sg-slide-container">
@@ -29,25 +30,22 @@
 			</div>
 		</div>
 
-		<f:if condition="{newsMetaData -> f:count()} > {settings.columns}">
-			<ul class="sg-slide-dots">
-				<f:for each="{newsMetaData}" as="data_item" iteration="iterator">
-					<li class="sg-slide-dots__indicator"><a class="sg-slide-dots__trigger"></a></li>
-				</f:for>
-			</ul>
-
-			<div class="sg-slide-prev">
-				<i class="fa fa-angle-left fa-5x" aria-hidden="true"><span class="sr-only">Previous</span></i>
-			</div>
-			<div class="sg-slide-next">
-				<i class="fa fa-angle-right fa-5x" aria-hidden="true"><span class="sr-only">Next</span></i>
-			</div>
-		</f:if>
+		<ul class="sg-slide-dots">
+			<f:for each="{newsMetaData}" as="data_item" iteration="iterator">
+				<li class="sg-slide-dots__indicator"><a class="sg-slide-dots__trigger"></a></li>
+			</f:for>
+		</ul>
+		<div class="sg-slide-prev">
+			<i class="fa fa-angle-left fa-5x" aria-hidden="true"><span class="sr-only">Previous</span></i>
+		</div>
+		<div class="sg-slide-next">
+			<i class="fa fa-angle-right fa-5x" aria-hidden="true"><span class="sr-only">Next</span></i>
+		</div>
 	</div>
 </f:section>
 
 <f:section name="layout-default">
-	<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-medium" data-interval="0">
+	<div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized sg-slide-medium" data-interval="0" data-columns="1">
 		<div class="sg-slide-track">
 			<div class="sg-slide-container">
 				<f:for each="{newsMetaData}" as="newsMetaDataEntry" iteration="iterator">

Resources/Public/Sass/_layout-content.scss

@@ -34,6 +34,15 @@
 		bottom: -10px;
 	}
 
+	&[data-current-columns="3"] {
+		.sg-slide-dots__indicator {
+			&:not(:nth-child(3n+1)) {
+				display: none;
+			}
+		}
+	}
+
+
 	.sg-slide-news-content {
 		margin-bottom: 16px;
 		padding: 0 35px