docsify-image-slider

A plugin for Docsify that allows you to create a slider for images in your documentation.

🔨 Import

To use the image slider, you need to include the plugin in your Docsify index.html file:

Add stylesheet

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-image-slider/dist/slider.min.css">

Add script

<script src="//cdn.jsdelivr.net/npm/docsify-image-slider/dist/docsify-image-slider.min.js"></script>

---

📋 Usage

To create an image slider, you can use the following syntax in your markdown files:

<div class="image-slider">
    [[slider]](img url 1|img url 2|img url 3|...)
</div>

---

⚙️ Configuration

To configure the slider, you can set options in your index.html file. The available options are:

Option	Type	Default	Description
auto	Boolean	false	Whether to automatically switch images.
intervalTime	Int	20000	Time interval for automatic switching (in milliseconds).

window.$docsify = {
  slider: {
    // Default options
    auto: false,
    intervalTime: 20000,
  },
};

---

🎨 Customization

The slider can be customized using CSS. You can override the following CSS variables.

Style	Description
--docsify-image-slider-transition	Transition effect for the slider.
--docsify-image-slider-width	Width of the slide.
--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-button-color	Color of the slider arrows.
--docsify-image-slider-button-bg-color	Background color of the slider buttons.
--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:

<style>
  :root {
    /* slider-buttons */
    --docsify-image-slider-button-color: #000000;
    --docsify-image-slider-button-border-color: #000000;
  }
</style>

---

✨ Contribution

Please feel free to submit a pull request or open an issue on the GitHub repository. Your contributions are welcome and appreciated!

---