1.3.0

Author: erectbranch

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 1.3.0
+
+_2025-04-29_
+
+- Simplified the slider syntax for easier usage.
+- Added customization options for button locations and colors.
+
 ## 1.2.1
 
 _2025-04-20_

README.md

@@ -34,9 +34,7 @@ To use the image slider, you need to include the plugin in your Docsify `index.h
 To create an image slider, you can use the following syntax in your markdown files:
 
 ```html
-<div class="image-slider">
-    [[slider]](img url 1|img url 2|img url 3|...)
-</div>
+[[slider]](img url 1|img url 2|...|img url n)
 ```
 
 ---
@@ -73,8 +71,10 @@ The slider can be customized using CSS. You can override the following CSS varia
 | `--docsify-image-slider-height` | Height of the slide. |
 | `--docsify-image-slider-max-width` | Maximum width of the slide. |
 | `--docsify-image-slider-overflow` | Overflow property for the slide. |
+| `--docsify-image-slider-left-right-margin` | Margin for the left and right sides of the slider buttons. |
 | `--docsify-image-slider-button-color` | Color of the slider arrows. |
 | `--docsify-image-slider-button-bg-color` | Background color of the slider buttons. |
+| `--docsify-image-slider-button-bg-hover-color` | Background color of the slider buttons on hover. |
 | `--docsify-image-slider-button-border-color` | Border color of the slider buttons. |
 
 To change the transition effect and the size of the slider, you can add the following styles to your `index.html` file:
@@ -88,10 +88,12 @@ To change the transition effect and the size of the slider, you can add the foll
     --docsify-image-slider-height: 50vh;
     --docsify-image-slider-max-width: 768px;
     --docsify-image-slider-overflow: hidden;
+    --docsify-image-slider-left-right-margin: -3rem;
 
     /* slider-buttons */
     --docsify-image-slider-button-color: #a0a0a0;
     --docsify-image-slider-button-bg-color: transparent;
+    --docsify-image-slider-button-bg-hover-color: #a0a0a01A;
     --docsify-image-slider-button-border-color: #a0a0a0;
   }
 </style>

src/slider.js

@@ -17,25 +17,27 @@ window.$docsify.plugins = (window.$docsify.plugins || []).concat((hook, vm) => {
             }).join('\n');
 
             return string.replace(
-                string, `<div class="slider-wrapper">
-                            <button class="slider-buttons" id="prev-slide">
-                                <i class="fas fa-arrow-left"></i>
-                            </button>
-                            <div class="slider">
-                                <div class="slide current"></div>
-                                ${imageUrls.map((url, index) => {
-                                    console.log(index)
-                                    console.log(imageUrls.length)
-                                    if (index === 0) {
-                                        return "";
-                                    } else {
-                                        return `<div class="slide"></div>`;
-                                    }
-                                }).join('')}
+                string, `<div class="image-slider">
+                            <div class="slider-wrapper">
+                                <button class="slider-buttons" id="prev-slide">
+                                    <i class="fas fa-arrow-left"></i>
+                                </button>
+                                <div class="slider">
+                                    <div class="slide current"></div>
+                                    ${imageUrls.map((url, index) => {
+                                        console.log(index)
+                                        console.log(imageUrls.length)
+                                        if (index === 0) {
+                                            return "";
+                                        } else {
+                                            return `<div class="slide"></div>`;
+                                        }
+                                    }).join('')}
+                                </div>
+                                <button class="slider-buttons" id="next-slide">
+                                    <i class="fas fa-arrow-right"></i>
+                                </button>
                             </div>
-                            <button class="slider-buttons" id="next-slide">
-                                <i class="fas fa-arrow-right"></i>
-                            </button>
                         </div>`
             );
         });

src/stylesheet.css

@@ -5,10 +5,12 @@
   --docsify-image-slider-height: 50vh;
   --docsify-image-slider-max-width: 768px;
   --docsify-image-slider-overflow: hidden;
+  --docsify-image-slider-left-right-margin: -3rem;
 
   /* slider-buttons */
   --docsify-image-slider-button-color: #a0a0a0;
   --docsify-image-slider-button-bg-color: transparent;
+  --docsify-image-slider-button-bg-hover-color: #a0a0a01A;
   --docsify-image-slider-button-border-color: #a0a0a0;
 }
 
@@ -29,6 +31,7 @@
   height: var(--docsify-image-slider-height);
   max-width: var(--docsify-image-slider-max-width);
   overflow: var(--docsify-image-slider-overflow);
+  margin: 0 var(--docsify-image-slider-left-right-margin);
   flex-shrink: 0;
 }
 
@@ -73,19 +76,6 @@ button.slider-buttons {
   margin: 0 1rem;
 }
 
-@media {
-  .slide .content {
-    left: -80%;   
-    width: 80%;    
-    padding: 2rem;
-    line-height: 1.6;
-  }
-
-  .slide .content h1 {
-    font-size: 2rem;
-  }
-
-  .slide.current .content {
-    transform: translateX(80%);
-  }
+button.slider-buttons:hover {
+  background-color: var(--docsify-image-slider-button-bg-hover-color);
 }