add additional settings

index.html

@@ -24,7 +24,7 @@
         crossorigin="anonymous">
 
     <!-- Citrus-Slider CSS -->
-    <link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.41">
+    <link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.5">
 
     <!-- highlightjs -->
     <link rel="stylesheet" href="css/highlightjs.css">
@@ -121,7 +121,7 @@
                         <a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/citrus-Slider/archive/1.0.4.zip" role="button">Download</a>
                         <a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/citrus-Slider" role="button">Source</a>
                     </p>
-                    <p>v1.0.4</p>
+                    <p>v1.0.5</p>
                 </div>
                 <div class="col d-none d-lg-block">
                     <img src="img/logo.svg?v1.1" width="300px" height="300px" class="d-inline-block align-top" alt="">
@@ -131,7 +131,7 @@
     </div>
     <div class="container">
         <section>
-            <div id="slider-demo-1" class="citrus-slider" data-citrus='{"slideTransition" : "zoom-fade"}' style="height: 400px;">
+            <div id="slider-demo-1" class="citrus-slider" data-citrus='{"height" : "400px", "slideTransition" : "zoom-fade"}'>
                 <div>
                     <img src="img/1.png?v=1.0.0">
                     <h2>Light, fast and free</h2>
@@ -294,7 +294,7 @@
         <section>
             <h2 id="settings" class="display-4">Settings</h2>
             <br>
-            <table class="table table-striped">
+            <table class="table table-striped table-bordered">
                 <thead>
                     <tr>
                         <th scope="col">Key</th>
@@ -304,6 +304,24 @@
                     </tr>
                 </thead>
                 <tbody>
+                    <tr>
+                        <td>width</td>
+                        <td>any valid css width (e.g 400px, 100%)</td>
+                        <td>'100%'</td>
+                        <td>Sets the width of the slider</td>
+                    </tr>
+                    <tr>
+                        <td>height</td>
+                        <td>any valid css height (e.g 400px, 100%)</td>
+                        <td>'100%'</td>
+                        <td>Sets the height of the slider</td>
+                    </tr>
+                    <tr>
+                        <td>autoHeight</td>
+                        <td>true, false</td>
+                        <td>'100%'</td>
+                        <td>Automatically sets the height of the slider based on the height of the content</td>
+                    </tr>
                     <tr>
                         <td>slideTransition</td>
                         <td>'pan', 'zoom-fade', 'scope', 'fallaway', 'downandout'</td>
@@ -384,11 +402,11 @@
         crossorigin="anonymous"></script>
 
     <!-- citrus-Slider JS -->
-    <script src="js/citrus-slider.min.js?v=1.0.42"></script>
+    <script src="js/citrus-slider.min.js?v=1.0.5"></script>
 
     <script>
         var settings = document.getElementById("demo-settings").querySelectorAll(".dropdown-item")
-        var slider = sliderObjects[0].settings
+        var slider = getSliders[0].settings
         for (let i = 0; i < settings.length; i++) {
             settings[i].addEventListener('click', function (e) {
                 e.preventDefault()
@@ -396,7 +414,7 @@
                 for (const key of Object.keys(update)) {
                     slider[key] = update[key]
                 }
-                sliderObjects[0].reset()
+                getSliders[0].reset()
             })
         }
     </script>