Skip to content

Commit 724bf24

Browse files
erectbrancherectbranch
committed
1.2.0
1 parent f0da5b3 commit 724bf24

File tree

3 files changed

+126
-81
lines changed

3 files changed

+126
-81
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Change Log
22

3+
## 1.2.0
4+
5+
_2025-04-11_
6+
7+
- Added customization options for slider appearance.
8+
39
## 1.1.0
410

511
_2025-04-11_

‎README.md

+33-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
# docsify-image-slider
44

5-
[![NPM Release](https://img.shields.io/npm/v/docsify-image-slider.svg)](https://www.npmjs.com/package/docsify-image-slider)
5+
[![NPM Release](https://img.shields.io/npm/v/docsify-image-slider.svg?logo=npm&style=flat-square)](https://www.npmjs.com/package/docsify-image-slider)
6+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/erectbranch/docsify-image-slider/blob/master/LICENSE)
67

78
A plugin for [Docsify](https://docsify.js.org/#/) that allows you to create a slider for images in your documentation.
89

@@ -14,13 +15,13 @@ A plugin for [Docsify](https://docsify.js.org/#/) that allows you to create a sl
1415

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

17-
(Add stylesheet)
18+
**Add stylesheet**
1819

1920
```html
2021
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-image-slider/dist/slider.min.css">
2122
```
2223

23-
(Add script)
24+
**Add script**
2425

2526
```html
2627
<script src="//cdn.jsdelivr.net/npm/docsify-image-slider/dist/docsify-image-slider.min.js"></script>
@@ -61,6 +62,35 @@ window.$docsify = {
6162

6263
---
6364

65+
## 🎨 Customization
66+
67+
The slider can be customized using CSS. You can override the following CSS variables.
68+
69+
| Style | Description |
70+
| --- | --- |
71+
| `--docsify-image-slider-transition` | Transition effect for the slider. |
72+
| `--docsify-image-slider-width` | Width of the slide. |
73+
| `--docsify-image-slider-height` | Height of the slide. |
74+
| `--docsify-image-slider-max-width` | Maximum width of the slide. |
75+
| `--docsify-image-slider-overflow` | Overflow property for the slide. |
76+
| `--docsify-image-slider-button-color` | Color of the slider arrows. |
77+
| `--docsify-image-slider-button-bg-color` | Background color of the slider buttons. |
78+
| `--docsify-image-slider-button-border-color` | Border color of the slider buttons. |
79+
80+
To change the transition effect and the size of the slider, you can add the following styles to your `index.html` file:
81+
82+
```html
83+
<style>
84+
:root {
85+
/* slider-buttons */
86+
--docsify-image-slider-button-color: #000000;
87+
--docsify-image-slider-button-border-color: #000000;
88+
}
89+
</style>
90+
```
91+
92+
---
93+
6494
## ✨ Contribution
6595

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

‎src/stylesheet.css

+87-78
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,90 @@
1-
.image-slider {
2-
display: flex;
3-
justify-content: center;
4-
align-items: center;
1+
:root {
2+
/* slider */
3+
--docsify-image-slider-transition: 0.4s ease-in-out;
4+
--docsify-image-slider-width: 50vw;
5+
--docsify-image-slider-height: 50vh;
6+
--docsify-image-slider-max-width: 768px;
7+
--docsify-image-slider-overflow: hidden;
8+
9+
/* slider-buttons */
10+
--docsify-image-slider-button-color: #a0a0a0;
11+
--docsify-image-slider-button-bg-color: transparent;
12+
--docsify-image-slider-button-border-color: #a0a0a0;
13+
}
14+
15+
.image-slider {
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
}
20+
21+
.slider-wrapper {
22+
display: flex;
23+
align-items: center;
24+
}
25+
26+
.slider {
27+
position: relative;
28+
width: var(--docsify-image-slider-width);
29+
height: var(--docsify-image-slider-height);
30+
overflow: var(--docsify-image-slider-overflow);
31+
flex-shrink: 0;
32+
}
33+
34+
.slide {
35+
position: absolute;
36+
width: 100%;
37+
height: 100%;
38+
opacity: 0;
39+
transition: var(--docsify-image-slider-transition);
40+
background-size: contain !important;
41+
background-position: center !important;
42+
background-repeat: no-repeat !important;
43+
}
44+
45+
.slide.current {
46+
opacity: 1;
47+
}
48+
49+
50+
button#prev-slide.slider-buttons {
51+
position: relative;
52+
z-index: 1000;
53+
top: 50%;
54+
left: 1rem;
55+
}
56+
57+
button#next-slide.slider-buttons {
58+
position: relative;
59+
z-index: 1000;
60+
top: 50%;
61+
right: 1rem;
62+
}
63+
64+
button.slider-buttons {
65+
border: 2px solid var(--docsify-image-slider-button-border-color);
66+
background-color: var(--docsify-image-slider-button-bg-color);
67+
color: var(--docsify-image-slider-button-color);
68+
cursor: pointer;
69+
padding: min(1vw, 12px) min(1.4vw, 14px);
70+
border-radius: 50%;
71+
outline: none;
72+
margin: 0 1rem;
73+
}
74+
75+
@media (max-width: var(--docsify-image-slider-max-width)) {
76+
.slide .content {
77+
left: -80%;
78+
width: 80%;
79+
padding: 2rem;
80+
line-height: 1.6;
581
}
6-
7-
.slider-wrapper {
8-
display: flex;
9-
align-items: center;
82+
83+
.slide .content h1 {
84+
font-size: 2rem;
1085
}
11-
12-
.slider {
13-
position: relative;
14-
width: 50vw;
15-
height: 50vh;
16-
overflow: hidden;
17-
flex-shrink: 0;
86+
87+
.slide.current .content {
88+
transform: translateX(80%);
1889
}
19-
20-
.slide {
21-
position: absolute;
22-
width: 100%;
23-
height: 100%;
24-
opacity: 0;
25-
transition: opacity 0.4s ease-in-out;
26-
background-size: contain !important;
27-
background-position: center !important;
28-
background-repeat: no-repeat !important;
29-
}
30-
31-
.slide.current {
32-
opacity: 1;
33-
}
34-
35-
36-
button#prev-slide.slider-buttons {
37-
position: relative;
38-
z-index: 1000;
39-
top: 50%;
40-
left: 1rem;
41-
}
42-
43-
button#next-slide.slider-buttons {
44-
position: relative;
45-
z-index: 1000;
46-
top: 50%;
47-
right: 1rem;
48-
}
49-
50-
button.slider-buttons {
51-
border: 2px solid #a0a0a0;
52-
background-color: transparent;
53-
color: #a0a0a0;
54-
cursor: pointer;
55-
padding: min(1vw, 12px) min(1.4vw, 14px);
56-
border-radius: 50%;
57-
outline: none;
58-
margin: 0 1rem;
59-
}
60-
61-
button:hover.slider-buttons {
62-
background-color: #ffeed5;
63-
color: #362a2b;
64-
}
65-
66-
@media (max-width: 768px) {
67-
.slide .content {
68-
left: -80%;
69-
width: 80%;
70-
padding: 2rem;
71-
line-height: 1.6;
72-
}
73-
74-
.slide .content h1 {
75-
font-size: 2rem;
76-
}
77-
78-
.slide.current .content {
79-
transform: translateX(80%);
80-
}
81-
}
90+
}

0 commit comments

Comments
 (0)