Skip to content

Commit 7276dfd

Browse files
jambonnjambonn
committed
Release and publish
1 parent 1f4b667 commit 7276dfd

File tree

7 files changed

+152
-7
lines changed

7 files changed

+152
-7
lines changed

‎demo/App.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@
7878
<span class="token punctuation">}</span>
7979
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
8080
</div>
81+
<div id="example-full" class="container">
82+
<h2 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
83+
Examples
84+
</h2>
85+
<example-basic />
86+
<example-responsive />
87+
<example-scroll-per-page />
88+
</div>
8189
<div id="license" class="container">
8290
<h2 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
8391
License
@@ -95,8 +103,12 @@
95103
</div>
96104
</template>
97105
<script>
106+
import ExampleBasic from './ExampleBasic'
107+
import ExampleResponsive from './ExampleResponsive'
108+
import ExampleScrollPerPage from './ExampleScrollPerPage'
98109
export default {
99110
name: 'App',
111+
components: { ExampleBasic, ExampleResponsive, ExampleScrollPerPage },
100112
data() {
101113
return {
102114
slideCount: 6,

‎demo/ExampleBasic.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div class="content">
3+
<h3 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
4+
1. Basic
5+
</h3>
6+
<p>No options configured, 10 slides added to the carousel.</p>
7+
<div class="example-basic" style="margin-bottom: 50px">
8+
<div class="preview">
9+
<carousel>
10+
<slide v-for="index in 10" :key="index">
11+
<img
12+
style="width: 100%"
13+
src="https://via.placeholder.com/1080.png/09f/fff"
14+
/>
15+
</slide>
16+
</carousel>
17+
</div>
18+
<div class="template">
19+
<pre
20+
class="language-html"
21+
><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
22+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
23+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>carousel</span><span class="token punctuation">&gt;</span></span>
24+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
25+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
26+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
27+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
28+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>carousel</span><span class="token punctuation">&gt;</span></span>
29+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
30+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
31+
</code></pre>
32+
</div>
33+
</div>
34+
</div>
35+
</template>
36+
37+
<script>
38+
export default {
39+
name: 'ExampleBasic',
40+
}
41+
</script>

‎demo/ExampleResponsive.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div class="content">
3+
<h3 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
4+
2. Responsive
5+
</h3>
6+
<p>
7+
Configured breakpoints: 2 slides on mobile (&lt;= 480px), 3 slides on
8+
tablet (&lt;= 768).
9+
</p>
10+
<div class="example-responsive" style="margin-bottom: 50px">
11+
<div class="preview">
12+
<carousel
13+
:per-page-custom="[
14+
[480, 2],
15+
[768, 3],
16+
]"
17+
>
18+
<slide v-for="index in 10" :key="index">
19+
<img
20+
style="width: 100%"
21+
src="https://via.placeholder.com/1080.png/09f/fff"
22+
/>
23+
</slide>
24+
</carousel>
25+
</div>
26+
<div class="template">
27+
<p>Template</p>
28+
<pre
29+
class="language-html"
30+
><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
31+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
32+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>carousel</span> <span class="token attr-name">:per-page-custom</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>[[480, 2], [768, 3]]<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
33+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
34+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
35+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
36+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
37+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>carousel</span><span class="token punctuation">&gt;</span></span>
38+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
39+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
40+
</code></pre>
41+
</div>
42+
</div>
43+
</div>
44+
</template>
45+
46+
<script>
47+
export default {
48+
name: 'ExampleResponsive',
49+
}
50+
</script>

‎demo/ExampleScrollPerPage.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div class="content">
3+
<h3 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
4+
3. Scroll per page false
5+
</h3>
6+
<p>
7+
Instead of scrolling per page, the carousel will scroll on a per item
8+
basis or perPageCustom with each movement.
9+
</p>
10+
<div class="example-scroll-per-page" style="margin-bottom: 50px">
11+
<div class="preview">
12+
<carousel :scroll-per-page="false">
13+
<slide v-for="index in 10" :key="index">
14+
<img
15+
style="width: 100%"
16+
src="https://via.placeholder.com/1080.png/09f/fff"
17+
/>
18+
</slide>
19+
</carousel>
20+
</div>
21+
<div class="template">
22+
<p>Template</p>
23+
<pre
24+
class="language-html"
25+
><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
26+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
27+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>carousel</span> <span class="token attr-name">:scroll-per-page</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
28+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
29+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
30+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
31+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
32+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>carousel</span><span class="token punctuation">&gt;</span></span>
33+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
34+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
35+
</code></pre>
36+
</div>
37+
</div>
38+
</div>
39+
</template>
40+
41+
<script>
42+
export default {
43+
name: 'ExampleScrollPerPage',
44+
}
45+
</script>

‎demo/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from 'vue'
22
import App from './App.vue'
3-
import { Carousel, Slide } from '../src/index'
3+
import Carousel from '../src/Carousel'
4+
import Slide from '../src/Slide'
45

56
Vue.config.productionTip = false
67

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "vue-concise-carousel",
2+
"name": "@jambonn/vue-concise-carousel",
33
"version": "0.1.0",
44
"description": "Vue Concise Carousel is SSR and CSR friendly",
55
"keywords": [
@@ -19,7 +19,7 @@
1919
"author": "Jambon <[email protected]>",
2020
"repository": {
2121
"type": "git",
22-
"url": "https://github.com/jambonn/vue-concise-carousel.git"
22+
"url": "git+https://github.com/jambonn/vue-concise-carousel.git"
2323
},
2424
"scripts": {
2525
"serve": "vue-cli-service serve --open",

‎src/index.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)