feat: Added new options dots position [Basicslider] #131

bricks.xml

@@ -182,6 +182,20 @@
                     <locale group="quiqqer/bricks" var="brick.control.basicSlider.navigationDotsShow"/>
                 </setting>
 
+                <setting name="navigationDotPosition" type="select">
+                    <locale group="quiqqer/bricks"
+                            var="brick.basicSlider.navigationDotPosition"/>
+
+                    <option value="underSlide">
+                        <locale group="quiqqer/bricks"
+                                var="brick.basicSlider.navigationDotPosition.underSlide"/>
+                    </option>
+                    <option value="underText">
+                        <locale group="quiqqer/bricks"
+                                var="brick.basicSlider.navigationDotPosition.underText"/>
+                    </option>
+                </setting>
+
                 <setting name="maxImageWidth" type="number">
                     <locale group="quiqqer/bricks"
                             var="brick.control.basicSlider.maxImageWidth"/>

locale.xml

@@ -432,6 +432,18 @@
             <de><![CDATA[Punktnavigation anzeigen]]></de>
             <en><![CDATA[Show dots navigation]]></en>
         </locale>
+        <locale name="brick.basicSlider.navigationDotPosition">
+            <de><![CDATA[Punktnavigation anzeigen]]></de>
+            <en><![CDATA[Navigation position]]></en>
+        </locale>
+        <locale name="brick.basicSlider.navigationDotPosition.underSlide">
+            <de><![CDATA[Unter Folie]]></de>
+            <en><![CDATA[Under slide]]></en>
+        </locale>
+        <locale name="brick.basicSlider.navigationDotPosition.underText">
+            <de><![CDATA[Unter Text]]></de>
+            <en><![CDATA[Under text]]></en>
+        </locale>
         <locale name="brick.control.basicSlider.maxImageWidth">
             <de><![CDATA[Maximale Briete des Bildes]]></de>
             <en><![CDATA[Maximum image width]]></en>

src/QUI/Bricks/Controls/Slider/BasicSlider.css

@@ -39,6 +39,11 @@
     flex-direction: row-reverse;
 }
 
+.basic-slider-dots {
+    text-align: center;
+    padding: 0;
+}
+
 .basic-slider-dots li {
     display: inline-block;
     width: 15px;

src/QUI/Bricks/Controls/Slider/BasicSlider.html

@@ -14,6 +14,16 @@
     <div class="basic-slider-content" style="align-items: {$textPosition};">
         <div class="basic-slider-content-container">
             {$sliderContent}
+
+            {if $dotsNav && $dotsPosition === 'underText'}
+            <ul class="basic-slider-dots">
+                {foreach from=$images item=Image key=key}
+
+                <li class="basic-slider-dot"></li>
+
+                {/foreach}
+            </ul>
+            {/if}
         </div>
     </div>
 
@@ -30,7 +40,7 @@
             {/foreach}
         </ul>
 
-        {if $dotsNav}
+        {if $dotsNav && $dotsPosition === 'underSlide'}
         <ul class="basic-slider-dots">
             {foreach from=$images item=Image key=key}
 

src/QUI/Bricks/Controls/Slider/BasicSlider.php

@@ -52,6 +52,7 @@ public function getBody()
         $sliderContent = $this->getAttribute('sliderContent');
         $imgLeft       = false;
         $dotsNav       = false;
+        $dotsPosition  = 'underSlide';
 
         if (!$mediaFolder) {
             return '';
@@ -94,7 +95,8 @@ public function getBody()
             $maxImageWidth = intval($this->getAttribute('maxImageWidth'));
         }
 
-        $dotsNav = $this->getAttribute('navigationDotsShow');
+        $dotsNav      = $this->getAttribute('navigationDotsShow');
+        $dotsPosition = $this->getAttribute('navigationDotPosition');
 
         // text position
         switch ($this->getAttribute('textPosition')) {
@@ -119,6 +121,7 @@ public function getBody()
             'maxImageWidth' => $maxImageWidth,
             'textPosition'  => $textPosition,
             'dotsNav'       => $dotsNav,
+            'dotsPosition'  => $dotsPosition,
         ];
 
         $Engine->assign($options);