Skip to content

Commit 9ac8bd6

Browse files
ismail9kismail9k
committed
docs: update carousel examples to use new import paths and configurations; remove deprecated LiveCodeExamples and add individual example exports
1 parent 96001d1 commit 9ac8bd6

17 files changed

+394
-852
lines changed

‎docs/vue-components/Features.vue renamed to ‎docs/.vitepress/components/Features.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
2-
import { Carousel, Navigation, Slide as CarouselSlide } from '../../dist/carousel.mjs'
3-
import '../../dist/carousel.css'
2+
import { Carousel, Navigation, Slide as CarouselSlide } from '../../../dist/carousel.mjs'
3+
import '../../../dist/carousel.css'
44
55
const config = {
66
snapAlign: 'start',
@@ -63,7 +63,6 @@ const features = [
6363
]
6464
</script>
6565

66-
6766
<template>
6867
<section class="features">
6968
<div class="container">
@@ -84,8 +83,6 @@ const features = [
8483
</section>
8584
</template>
8685

87-
88-
8986
<style>
9087
.features {
9188
margin: 0 auto;
@@ -101,7 +98,9 @@ const features = [
10198
border-radius: 12px;
10299
height: 100%;
103100
background-color: var(--vp-c-bg-soft);
104-
transition: border-color 0.25s, background-color 0.25s;
101+
transition:
102+
border-color 0.25s,
103+
background-color 0.25s;
105104
106105
@media screen and (max-width: 640px) {
107106
margin-bottom: 16px;
@@ -151,4 +150,4 @@ const features = [
151150
--vc-nav-height: 50px;
152151
}
153152
}
154-
</style>
153+
</style>

‎docs/.vitepress/components/LiveCodes.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,4 @@ watch(isDark, () => {
6363
@sdk-ready="onReady"
6464
:style="{ height: props.height || '250px' }"
6565
/>
66-
</template>
66+
</template>

‎docs/examples.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,63 @@
11
# Examples
22

3-
If you're experiencing issues loading the live examples or you're browsing on a mobile device, visit the [Fallback Examples Page](/examples-fallback) for a better experience.
3+
This page showcases examples of the carousel component with live demos. Explore different configurations from basic to advanced, and use the provided code samples as starting points for your own implementations.
4+
45

56
## Basic
67

78
A simple implementation of the carousel with default settings.
89

9-
<live-codes v-bind="LiveCodeExamples.basic" />
10+
<live-codes :code="examples.BasicExample" />
1011

1112
## Wrap Around
1213

1314
Demonstrates a carousel with continuous wrap-around functionality.
1415

15-
<live-codes v-bind="LiveCodeExamples.wrapAround" />
16+
<live-codes :code="examples.WrapAroundExample" />
1617

1718
## Vertical
1819

1920
Showcases a vertically scrolling carousel. Adjust the height to better fit your content.
2021

21-
<live-codes v-bind="LiveCodeExamples.vertical" height="475px" />
22+
<live-codes :code="examples.VerticalExample" height="475px" />
2223

2324
## Breakpoints
2425

2526
An example of a responsive carousel with breakpoints for varying screen sizes.
2627

27-
<live-codes v-bind="LiveCodeExamples.breakpoints" />
28+
<live-codes :code="examples.BreakpointsExample" />
2829

2930
## Autoplay
3031

3132
Illustrates the carousel with autoplay functionality enabled.
3233

33-
<live-codes v-bind="LiveCodeExamples.autoplay" />
34+
<live-codes :code="examples.AutoplayExample" />
3435

35-
## Mouse Scroll
36+
## Mouse Wheel
3637

3738
Demonstrates the carousel with mouse wheel scrolling navigation enabled.
3839

39-
<live-codes v-bind="LiveCodeExamples.mouseScroll" />
40+
<live-codes :code="examples.MouseWheelExample" />
4041

4142
## Active Classes
4243

4344
An example highlighting active items with custom classes.
4445

45-
<live-codes v-bind="LiveCodeExamples.activeClasses" />
46+
<live-codes :code="examples.ActiveClassesExample" />
4647

4748
## Custom Navigation
4849

4950
A demonstration of the carousel with fully customizable navigation controls.
5051

51-
<live-codes v-bind="LiveCodeExamples.customNavigation" height="260px" />
52+
<live-codes :code="examples.CustomNavigationExample" height="260px" />
5253

5354
## Gallery
5455

5556
Transforms the carousel into a gallery-style component.
5657

57-
<live-codes v-bind="LiveCodeExamples.gallery" height="455px" />
58+
<live-codes :code="examples.GalleryExample" height="455px" />
5859

5960
<script setup>
6061
import LiveCodes from './.vitepress/components/LiveCodes.vue';
61-
import { LiveCodeExamples } from './examples';
62+
import * as examples from './examples';
6263
</script>

‎docs/examples/ExampleActiveClasses.vue

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
<script setup>
2-
import { Carousel, Navigation, Slide } from '../../dist/carousel.mjs'
3-
import '../../dist/carousel.css'
2+
import 'vue3-carousel/carousel.css'
3+
import { Carousel, Slide, Navigation } from 'vue3-carousel'
44
5-
const config = {
6-
itemsToShow: 4,
5+
const images = Array.from({ length: 10 }, (_, index) => ({
6+
id: index + 1,
7+
url: `https://picsum.photos/800/600?random=${index + 1}`,
8+
}))
9+
10+
const carouselConfig = {
11+
height: 200,
12+
itemsToShow: 3.5,
713
wrapAround: true,
814
}
915
</script>
1016

1117
<template>
12-
<Carousel v-bind="config">
13-
<Slide v-for="slide in 10" :key="slide">
14-
<div class="carousel__item">{{ slide }}</div>
18+
<Carousel v-bind="carouselConfig">
19+
<Slide v-for="image in images" :key="image.id">
20+
<img :src="image.url" alt="image" />
1521
</Slide>
1622

1723
<template #addons>
@@ -20,12 +26,26 @@ const config = {
2026
</Carousel>
2127
</template>
2228

23-
<style scoped>
24-
.carousel {
25-
--carousel-transition: 500ms;
29+
<style>
30+
:root {
31+
--carousel-transition: 300ms;
2632
--carousel-opacity-inactive: 0.7;
2733
--carousel-opacity-active: 1;
2834
--carousel-opacity-near: 0.9;
35+
36+
background-color: #242424;
37+
}
38+
39+
.carousel {
40+
--vc-nav-background: rgba(255, 255, 255, 0.7);
41+
--vc-nav-border-radius: 100%;
42+
}
43+
44+
img {
45+
border-radius: 8px;
46+
width: 100%;
47+
height: 100%;
48+
object-fit: cover;
2949
}
3050
3151
.carousel__viewport {
@@ -37,11 +57,15 @@ const config = {
3757
}
3858
3959
.carousel__slide--sliding {
40-
transition: opacity var(--carousel-transition), transform var(--carousel-transition);
60+
transition:
61+
opacity var(--carousel-transition),
62+
transform var(--carousel-transition);
4163
}
4264
4365
.carousel.is-dragging .carousel__slide {
44-
transition: opacity var(--carousel-transition), transform var(--carousel-transition);
66+
transition:
67+
opacity var(--carousel-transition),
68+
transform var(--carousel-transition);
4569
}
4670
4771
.carousel__slide {

‎docs/examples/ExampleAutoplay.vue

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
<script setup>
2-
import '../../dist/carousel.css'
3-
import { Carousel, Slide, Navigation } from '../../dist/carousel.mjs'
2+
import 'vue3-carousel/carousel.css'
3+
import { Carousel, Slide, Navigation } from 'vue3-carousel'
4+
5+
const images = Array.from({ length: 10 }, (_, index) => ({
6+
id: index + 1,
7+
url: `https://picsum.photos/800/600?random=${index + 1}`,
8+
}))
49
510
const config = {
6-
autoplay: 2000,
11+
height: 200,
12+
itemsToShow: 2,
13+
gap: 5,
14+
autoplay: 4000,
715
wrapAround: true,
816
pauseAutoplayOnHover: true,
917
}
1018
</script>
1119

1220
<template>
1321
<Carousel v-bind="config">
14-
<Slide v-for="slide in 10" :key="slide">
15-
<div class="carousel__item">{{ slide }}</div>
22+
<Slide v-for="image in images" :key="image.id">
23+
<img :src="image.url" alt="image" />
1624
</Slide>
1725

1826
<template #addons>
@@ -21,3 +29,20 @@ const config = {
2129
</Carousel>
2230
</template>
2331

32+
<style>
33+
:root {
34+
background-color: #242424;
35+
}
36+
37+
.carousel {
38+
--vc-nav-background: rgba(255, 255, 255, 0.7);
39+
--vc-nav-border-radius: 100%;
40+
}
41+
42+
img {
43+
border-radius: 8px;
44+
width: 100%;
45+
height: 100%;
46+
object-fit: cover;
47+
}
48+
</style>

‎docs/examples/ExampleBasic.vue

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
<script setup>
2-
import { Carousel, Pagination, Navigation, Slide } from '../../dist/carousel.mjs'
3-
import '../../dist/carousel.css'
4-
const config = {}
2+
import 'vue3-carousel/carousel.css'
3+
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
4+
5+
const images = Array.from({ length: 10 }, (_, index) => ({
6+
id: index + 1,
7+
url: `https://picsum.photos/800/600?random=${index + 1}`,
8+
}))
9+
10+
const config = {
11+
height: 200,
12+
itemsToShow: 2,
13+
gap: 5,
14+
}
515
</script>
616

717
<template>
818
<Carousel v-bind="config">
9-
<Slide v-for="slide in 10" :key="slide">
10-
<div class="carousel__item">{{ slide }}</div>
19+
<Slide v-for="image in images" :key="image.id">
20+
<img :src="image.url" alt="image" />
1121
</Slide>
1222

1323
<template #addons>
@@ -16,3 +26,23 @@ const config = {}
1626
</template>
1727
</Carousel>
1828
</template>
29+
30+
<style>
31+
:root {
32+
background-color: #242424;
33+
}
34+
35+
.carousel {
36+
--vc-pgn-background-color: rgba(255, 255, 255, 0.7);
37+
--vc-pgn-active-color: rgba(255, 255, 255, 1);
38+
--vc-nav-background: rgba(255, 255, 255, 0.7);
39+
--vc-nav-border-radius: 100%;
40+
}
41+
42+
img {
43+
border-radius: 8px;
44+
width: 100%;
45+
height: 100%;
46+
object-fit: cover;
47+
}
48+
</style>

‎docs/examples/ExampleBreakpoints.vue

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<script setup>
2-
import { Carousel, Navigation, Slide } from '../../dist/carousel.mjs'
2+
import 'vue3-carousel/carousel.css'
3+
import { Carousel, Slide, Navigation } from 'vue3-carousel'
34
4-
import '../../dist/carousel.css'
5+
const images = Array.from({ length: 10 }, (_, index) => ({
6+
id: index + 1,
7+
url: `https://picsum.photos/800/600?random=${index + 1}`,
8+
}))
59
610
// Carousel configuration
711
const config = {
12+
height: 200,
813
itemsToShow: 1,
14+
gap: 5,
915
snapAlign: 'center',
1016
1117
// 'breakpointMode' determines how the carousel breakpoints are calculated
@@ -39,16 +45,41 @@ const config = {
3945
<template>
4046
<!-- Resizable container for testing 'carousel' breakpointMode -->
4147
<!-- Drag the right edge to adjust the width and see the breakpoints change -->
42-
<div style="resize: horizontal; border: 2px dashed gray; overflow: auto">
48+
<div class="carousel__wrapper">
4349
<Carousel v-bind="config">
44-
<Slide v-for="slide in 10" :key="slide">
45-
<div class="carousel__item">{{ slide }}</div>
50+
<Slide v-for="image in images" :key="image.id">
51+
<img :src="image.url" alt="image" />
4652
</Slide>
53+
4754
<template #addons>
4855
<Navigation />
4956
</template>
5057
</Carousel>
5158
</div>
5259
</template>
5360

61+
<style>
62+
:root {
63+
background-color: #242424;
64+
}
65+
66+
.carousel {
67+
--vc-nav-background: rgba(255, 255, 255, 0.7);
68+
--vc-nav-border-radius: 100%;
69+
}
5470
71+
img {
72+
border-radius: 8px;
73+
width: 100%;
74+
height: 100%;
75+
object-fit: cover;
76+
}
77+
78+
.carousel__wrapper {
79+
resize: horizontal;
80+
border: 2px dashed gray;
81+
overflow: auto;
82+
max-width: 688px;
83+
padding: 2px;
84+
}
85+
</style>

0 commit comments

Comments
 (0)