jeawin-astro 3.0.91 → 3.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
/**
|
|
3
|
-
* banner
|
|
3
|
+
* banner切换组件-splide版
|
|
4
4
|
*
|
|
5
|
-
* jeawin-astro/src/components/
|
|
5
|
+
* jeawin-astro/src/components/banner_splide.astro
|
|
6
6
|
*
|
|
7
7
|
* @package jeawin-astro
|
|
8
8
|
* @author Chaegumi
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* @email chaegumi@jeawin.com
|
|
11
11
|
* @filesource
|
|
12
12
|
*/
|
|
13
|
-
import '@splidejs/splide/css
|
|
13
|
+
import '@splidejs/splide/css';
|
|
14
14
|
import _ from "lodash";
|
|
15
15
|
import { img_change_attrs, render_value, render_url, render_lang } from "../scripts/util.js";
|
|
16
16
|
import JeawinApi from "../scripts/cms.js";
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
* @email chaegumi@jeawin.com
|
|
11
11
|
* @filesource
|
|
12
12
|
*/
|
|
13
|
+
import '@splidejs/splide/css';
|
|
13
14
|
import { Icon } from "astro-icon/components";
|
|
14
15
|
import Youtube from "./youtube.astro";
|
|
15
16
|
import Vimeo from "./vimeo.astro";
|
|
@@ -97,7 +98,7 @@ if(num > 1){
|
|
|
97
98
|
nodepics.map((pic: any, idx: number) => (
|
|
98
99
|
<li class:list={["splide__slide"]}>
|
|
99
100
|
<div class="magnifier">
|
|
100
|
-
<JeawinImage img_html={pic} loading={idx > 0 ? "lazy" : "eager"} fetchpriority={idx > 0 ? 'low' : 'high'} />
|
|
101
|
+
<JeawinImage img_html={pic} loading={idx > 0 ? "lazy" : "eager"} fetchpriority={idx > 0 ? 'low' : 'high'} />
|
|
101
102
|
</div>
|
|
102
103
|
|
|
103
104
|
</li>
|
package/src/components/index.ts
CHANGED
|
@@ -55,6 +55,7 @@ export {default as SocialMedia} from "./social_media.astro";
|
|
|
55
55
|
export {default as Star} from "./star.astro";
|
|
56
56
|
export {default as Stat} from "./stat.astro";
|
|
57
57
|
export {default as Swiper} from "./swiper.astro";
|
|
58
|
+
export {default as Splide} from "./splide.astro";
|
|
58
59
|
export {default as Tabs} from "./tabs.astro";
|
|
59
60
|
export {default as TagsCategoryList} from "./tags_category_list.astro";
|
|
60
61
|
export {default as Vimeo} from "./vimeo.astro";
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
---
|
|
2
|
+
/**
|
|
3
|
+
* 图片切换展示组件-splide版
|
|
4
|
+
*
|
|
5
|
+
* jeawin-astro/src/components/splide.astro
|
|
6
|
+
*
|
|
7
|
+
* @package jeawin-astro
|
|
8
|
+
* @author Chaegumi
|
|
9
|
+
* @copyright Copyright (c) 2024-2099 jeawin.com
|
|
10
|
+
* @email chaegumi@jeawin.com
|
|
11
|
+
* @filesource
|
|
12
|
+
*/
|
|
13
|
+
import '@splidejs/splide/css';
|
|
14
|
+
import CommonCard from "./common_card.astro";
|
|
15
|
+
const {
|
|
16
|
+
splideID,
|
|
17
|
+
items,
|
|
18
|
+
autoPlay = true,
|
|
19
|
+
slidesPerView = 1,
|
|
20
|
+
spaceBetween = 15,
|
|
21
|
+
mdSlidesPerView = 1,
|
|
22
|
+
mdSpaceBetween = 15,
|
|
23
|
+
...other_props
|
|
24
|
+
} = Astro.props;
|
|
25
|
+
|
|
26
|
+
let html = "";
|
|
27
|
+
if (Astro.slots.has("default")) {
|
|
28
|
+
html = await Astro.slots.render("default", [items]);
|
|
29
|
+
}
|
|
30
|
+
---
|
|
31
|
+
<astro-splide
|
|
32
|
+
data-swiper_id={splideID}
|
|
33
|
+
data-slides_per_view={slidesPerView}
|
|
34
|
+
data-space_between={spaceBetween}
|
|
35
|
+
data-md_slides_per_view={mdSlidesPerView}
|
|
36
|
+
data-md_space_between={mdSpaceBetween}>
|
|
37
|
+
<section class="splide" aria-label="Splide Basic HTML Example">
|
|
38
|
+
<div class="splide__track">
|
|
39
|
+
<ul class="splide__list">
|
|
40
|
+
{
|
|
41
|
+
Astro.slots.has("default") ? (
|
|
42
|
+
<Fragment set:html={html} />
|
|
43
|
+
) : (
|
|
44
|
+
<Fragment>
|
|
45
|
+
{items.map((item: any, idx: number) => (
|
|
46
|
+
<li class="splide__slide">
|
|
47
|
+
<CommonCard node={item} />
|
|
48
|
+
</li>
|
|
49
|
+
))}
|
|
50
|
+
</Fragment>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
</section>
|
|
56
|
+
</astro-splide>
|
|
57
|
+
<style>
|
|
58
|
+
.splide{
|
|
59
|
+
margin:0 auto;
|
|
60
|
+
}
|
|
61
|
+
.splide__slide img{
|
|
62
|
+
width:100%;
|
|
63
|
+
/* height: auto; */
|
|
64
|
+
height:100%;
|
|
65
|
+
object-fit: cover;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.splide__slide.is-active {
|
|
69
|
+
opacity: 1;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
<script>
|
|
73
|
+
import Splide from "@splidejs/splide";
|
|
74
|
+
|
|
75
|
+
class AstroSplide extends HTMLElement{
|
|
76
|
+
constructor(){
|
|
77
|
+
super();
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
connectedCallback(){
|
|
81
|
+
const splideElem: any = this.querySelector('.splide');
|
|
82
|
+
if(splideElem){
|
|
83
|
+
|
|
84
|
+
const perPage = this.dataset.md_slides_per_view;
|
|
85
|
+
const spaceBetween = this.dataset.md_space_between;
|
|
86
|
+
|
|
87
|
+
const splide = new Splide( splideElem, {
|
|
88
|
+
autoplay: true,
|
|
89
|
+
perPage: Number(perPage) || 6,
|
|
90
|
+
gap: Number(spaceBetween) || 10,
|
|
91
|
+
rewind : true
|
|
92
|
+
} );
|
|
93
|
+
|
|
94
|
+
splide.mount();
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
customElements.define('astro-splide', AstroSplide);
|
|
101
|
+
|
|
102
|
+
</script>
|