[DOCS] Add slider configuration

buepro · Mar 26, 2024 · b7f7756 · b7f7756
1 parent e98fee7
commit b7f7756
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/Configuration/FlexForms/Slider.xml b/Configuration/FlexForms/Slider.xml
@@ -81,33 +81,6 @@
                         <TCEforms type="array">
                             <label>LLL:EXT:container_elements/Resources/Private/Language/locallang.xlf:slider.config</label>
                             <description>LLL:EXT:container_elements/Resources/Private/Language/locallang.xlf:slider.config.description</description>
-                            <default>
-{
-    "slidesPerView": 4,
-    "spaceBetween": "20px",
-    "slidesPerGroup": 1,
-    "loop": 0,
-    "disableOnInteraction": "true",
-    "autoplay": "auto",
-    "breakpoints": {
-        "10": {
-            "slidesPerView": 1
-        },
-        "576": {
-            "slidesPerView": 1
-        },
-        "768": {
-            "slidesPerView": 2
-        },
-        "1200": {
-            "slidesPerView": 3
-        },
-        "1400": {
-            "slidesPerView": 4
-        }
-    }
-}
-                            </default>
                             <config type="array">
                                 <type>text</type>
                                 <renderType>t3editor</renderType>

diff --git a/Documentation/User/20_AdjustElements.rst b/Documentation/User/20_AdjustElements.rst
@@ -91,3 +91,40 @@ Cards might be grouped with container elements.
    :alt: Cards in container
 
    Two cards in a container
+
+.. _user_adjust_slider:
+
+Slider
+======
+
+The slider container element uses the `Swiper js library <https://swiperjs.com/>`__.
+The behaviour from each slider can be configured within the content element using
+json:
+
+.. code-block:: yaml
+
+   {
+       "slidesPerView": 4,
+       "spaceBetween": "20px",
+       "slidesPerGroup": 1,
+       "loop": 0,
+       "disableOnInteraction": "true",
+       "autoplay": "auto",
+       "breakpoints": {
+           "10": {
+               "slidesPerView": 1
+           },
+           "576": {
+               "slidesPerView": 1
+           },
+           "768": {
+               "slidesPerView": 2
+           },
+           "1200": {
+               "slidesPerView": 3
+           },
+           "1400": {
+               "slidesPerView": 4
+           }
+       }
+   }