vue-responsive-carousel 1.0.0 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +27 -1
- package/dist/responsive-carousel.es.js +69 -0
- package/dist/responsive-carousel.umd.js +1 -0
- package/dist/style.css +1 -0
- package/package.json +5 -5
package/README.md
CHANGED
@@ -1,6 +1,32 @@
|
|
1
1
|
# Vue Responsive Carousel
|
2
2
|
|
3
|
-
|
3
|
+
![NPM License](https://img.shields.io/npm/l/vue-responsive-carousel)
|
4
|
+
|
5
|
+
**Lightweight** image carousel component for [Vue](https://vuejs.org/) **< 10k** 😎 <br>
|
6
|
+
|
7
|
+
![responsive-carousel](https://private-user-images.githubusercontent.com/91323932/268753208-cfd92d05-6442-4ba5-951d-fbcaff9a76b0.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE2OTUwNjU1NzAsIm5iZiI6MTY5NTA2NTI3MCwicGF0aCI6Ii85MTMyMzkzMi8yNjg3NTMyMDgtY2ZkOTJkMDUtNjQ0Mi00YmE1LTk1MWQtZmJjYWZmOWE3NmIwLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzA5MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMwOTE4VDE5Mjc1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY3YTdkZGVkMWVkZTA4MzJmZmJiNDJkYTUwMDJiYzJkYzc5Y2Y4ZTAzZDEwOTg5ODQxNjhhMDU3NDlhNTEwMDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Ao5F4g1565RyJr3AMlPO2NTCtUNtastg81cJS6P3vpU)
|
8
|
+
|
9
|
+
## Usage
|
10
|
+
|
11
|
+
`npm i vue-responsive-carousel`
|
12
|
+
|
13
|
+
```
|
14
|
+
<script setup>
|
15
|
+
import ResponsiveCarousel from 'vue-responsive-carousel';
|
16
|
+
import 'vue-responsive-carousel/dist/style.css';
|
17
|
+
|
18
|
+
const images = [
|
19
|
+
{ src: './sablon.jpg', alt: 'Sablon'},
|
20
|
+
{ src: './tree.jpg', alt: 'Tree'},
|
21
|
+
]
|
22
|
+
</script>
|
23
|
+
|
24
|
+
|
25
|
+
<template>
|
26
|
+
<ResponsiveCarousel :images="images"/>
|
27
|
+
</template
|
28
|
+
```
|
29
|
+
|
4
30
|
|
5
31
|
## Contact
|
6
32
|
Feel free to ping me 💫
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import { openBlock as p, createElementBlock as m, createElementVNode as n, pushScopeId as _, popScopeId as u } from "vue";
|
2
|
+
const v = (e, r) => {
|
3
|
+
const a = e.__vccOpts || e;
|
4
|
+
for (const [t, d] of r)
|
5
|
+
a[t] = d;
|
6
|
+
return a;
|
7
|
+
}, l = (e) => (_("data-v-8b5f0cf0"), e = e(), u(), e), f = { class: "current-image-wrapper" }, y = /* @__PURE__ */ l(() => /* @__PURE__ */ n("div", { class: "current-image" }, null, -1)), h = { class: "arrows" }, w = /* @__PURE__ */ l(() => /* @__PURE__ */ n("object", {
|
8
|
+
class: "arrow",
|
9
|
+
data: "/icons/arrow-left.svg",
|
10
|
+
type: "image/svg+xml",
|
11
|
+
style: { "pointer-events": "none" }
|
12
|
+
}, null, -1)), b = [
|
13
|
+
w
|
14
|
+
], k = /* @__PURE__ */ l(() => /* @__PURE__ */ n("object", {
|
15
|
+
class: "arrow",
|
16
|
+
data: "/icons/arrow-right.svg",
|
17
|
+
type: "image/svg+xml",
|
18
|
+
style: { "pointer-events": "none" }
|
19
|
+
}, null, -1)), I = [
|
20
|
+
k
|
21
|
+
], S = {
|
22
|
+
__name: "ResponsiveCarousel",
|
23
|
+
props: ["images"],
|
24
|
+
setup(e) {
|
25
|
+
const r = e, a = r.images.length;
|
26
|
+
let t = 0;
|
27
|
+
(() => {
|
28
|
+
let o = new Image();
|
29
|
+
o.src = r.images[t].src, o.onload = () => {
|
30
|
+
document.querySelector(".current-image").style["background-image"] = "url(" + o.src + ")";
|
31
|
+
};
|
32
|
+
})();
|
33
|
+
const i = {
|
34
|
+
Right: Symbol("right"),
|
35
|
+
Left: Symbol("left")
|
36
|
+
};
|
37
|
+
function g(o, s) {
|
38
|
+
s === i.Right ? t++ : t--, t = (t + a) % a;
|
39
|
+
const c = document.querySelector(".current-image");
|
40
|
+
c.style.opacity = 0, c.style["background-image"] = "url(" + r.images[t].src + ")", c.animate(
|
41
|
+
{
|
42
|
+
opacity: [0, 1]
|
43
|
+
},
|
44
|
+
{
|
45
|
+
fill: "both",
|
46
|
+
duration: 1500,
|
47
|
+
rangeStart: "cover 0%",
|
48
|
+
rangeEnd: "cover 100%"
|
49
|
+
}
|
50
|
+
);
|
51
|
+
}
|
52
|
+
return (o, s) => (p(), m("div", f, [
|
53
|
+
y,
|
54
|
+
n("div", h, [
|
55
|
+
n("div", {
|
56
|
+
class: "arrow-wrapper",
|
57
|
+
onClick: s[0] || (s[0] = (c) => g(o.e, i.Left))
|
58
|
+
}, b),
|
59
|
+
n("div", {
|
60
|
+
class: "arrow-wrapper",
|
61
|
+
onClick: s[1] || (s[1] = (c) => g(o.e, i.Right))
|
62
|
+
}, I)
|
63
|
+
])
|
64
|
+
]));
|
65
|
+
}
|
66
|
+
}, R = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8b5f0cf0"]]);
|
67
|
+
export {
|
68
|
+
R as default
|
69
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(e=typeof globalThis<"u"?globalThis:e||self,e["vue-responsive-carousel"]=a(e.Vue))})(this,function(e){"use strict";const a="",_=(t,r)=>{const c=t.__vccOpts||t;for(const[o,p]of r)c[o]=p;return c},l=t=>(e.pushScopeId("data-v-8b5f0cf0"),t=t(),e.popScopeId(),t),u={class:"current-image-wrapper"},g=l(()=>e.createElementVNode("div",{class:"current-image"},null,-1)),f={class:"arrows"},v=[l(()=>e.createElementVNode("object",{class:"arrow",data:"/icons/arrow-left.svg",type:"image/svg+xml",style:{"pointer-events":"none"}},null,-1))],h=[l(()=>e.createElementVNode("object",{class:"arrow",data:"/icons/arrow-right.svg",type:"image/svg+xml",style:{"pointer-events":"none"}},null,-1))];return _({__name:"ResponsiveCarousel",props:["images"],setup(t){const r=t,c=r.images.length;let o=0;(()=>{let s=new Image;s.src=r.images[o].src,s.onload=()=>{document.querySelector(".current-image").style["background-image"]="url("+s.src+")"}})();const d={Right:Symbol("right"),Left:Symbol("left")};function m(s,n){n===d.Right?o++:o--,o=(o+c)%c;const i=document.querySelector(".current-image");i.style.opacity=0,i.style["background-image"]="url("+r.images[o].src+")",i.animate({opacity:[0,1]},{fill:"both",duration:1500,rangeStart:"cover 0%",rangeEnd:"cover 100%"})}return(s,n)=>(e.openBlock(),e.createElementBlock("div",u,[g,e.createElementVNode("div",f,[e.createElementVNode("div",{class:"arrow-wrapper",onClick:n[0]||(n[0]=i=>m(s.e,d.Left))},v),e.createElementVNode("div",{class:"arrow-wrapper",onClick:n[1]||(n[1]=i=>m(s.e,d.Right))},h)])]))}},[["__scopeId","data-v-8b5f0cf0"]])});
|
package/dist/style.css
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
.current-image-wrapper[data-v-8b5f0cf0]{height:100%}.current-image[data-v-8b5f0cf0]{background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;animation:fadeIn-8b5f0cf0 2s}@keyframes fadeIn-8b5f0cf0{0%{opacity:0}to{opacity:100}}.arrows[data-v-8b5f0cf0]{display:flex;justify-content:space-between;padding:1rem;position:relative;top:-50%;transform:translateY(-50%)}.arrow-wrapper[data-v-8b5f0cf0]:hover{cursor:pointer}.arrow[data-v-8b5f0cf0]{height:1.5rem}
|
package/package.json
CHANGED
@@ -1,19 +1,19 @@
|
|
1
1
|
{
|
2
2
|
"name": "vue-responsive-carousel",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.2",
|
4
4
|
"author": "Gilad Shohat",
|
5
5
|
"description": "Vue Responsive Carousel",
|
6
6
|
"homepage": "https://github.com/gshohat/vue-responsive-carousel#readme",
|
7
7
|
"license": "MIT",
|
8
|
-
"main": "./dist/
|
9
|
-
"module": "./dist/
|
8
|
+
"main": "./dist/responsive-carousel.umd.js",
|
9
|
+
"module": "./dist/responsive-carousel.es.js",
|
10
10
|
"files": [
|
11
11
|
"dist"
|
12
12
|
],
|
13
13
|
"exports": {
|
14
14
|
".": {
|
15
|
-
"import": "./dist/
|
16
|
-
"require": "./dist/
|
15
|
+
"import": "./dist/responsive-carousel.es.js",
|
16
|
+
"require": "./dist/responsive-carousel.umd.js"
|
17
17
|
},
|
18
18
|
"./dist/style.css": "./dist/style.css"
|
19
19
|
},
|