Skip to content

Commit 6cd0985

Browse files
ismail9kismail9k
authored
Merge pull request #423 from ismail9k/feat-support-vertical-slides
Feat support vertical slides
2 parents d6e42a0 + 9cc485b commit 6cd0985

25 files changed

+374
-287
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ https://vue3-carousel.ismail9k.com/
2121
- [x] Add classes for active and for visible slides
2222
- [x] RTL
2323
- [x] Enrich a11y
24-
- [ ] Vertical Slides
24+
- [x] Vertical Slides
2525

2626
## Nuxt Module
2727

‎docs/api/data.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,13 @@ if (myCarousel.data.currentSlide === 10) {
2121

2222
## Available Data
2323

24-
| Data | Description |
25-
| -------------- | ---------------------------------- |
26-
| `config` | the current carousel configuration |
27-
| `slidesCount` | slides total count |
28-
| `slideWidth` | single slide width |
29-
| `currentSlide` | current slide index |
30-
| `maxSlide` | maximum slide index |
31-
| `minSlide` | minimum slide index |
32-
| `middleSlide` | middle slide index |
24+
| Data | Description |
25+
| ---------------- | -------------------------------------------------------------------------- |
26+
| `config` | the current carousel configuration |
27+
| `slidesCount` | slides total count |
28+
| ~~`slideWidth`~~ | ~~single slide width~~ <Badge type="danger" text="Rename to slideSize"/> |
29+
| `slideSize` | single slide width or height |
30+
| `currentSlide` | current slide index |
31+
| `maxSlide` | maximum slide index |
32+
| `minSlide` | minimum slide index |
33+
| `middleSlide` | middle slide index |

‎docs/api/methods.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const myCarousel = ref(null)
1414

1515
// Methods are available in this reference
1616
myCarousel.next()
17-
myCarousel.updateSlideWidth()
17+
myCarousel.updateSlideSize()
1818
```
1919

2020
## slideTo(index: number)
@@ -29,9 +29,13 @@ Slide to the next slide
2929

3030
Slide to the previous slide
3131

32-
## updateSlideWidth()
32+
## ~~updateSlideWidth()~~ <Badge type="danger" text="Rename to updateSlideSize"/>
3333

34-
Update `slideWidth` value based on `itemsToShow` and the current carousel width
34+
~~Update `slideWidth` value based on `itemsToShow` and the current carousel width~~
35+
36+
## updateSlideSize()
37+
38+
Update `slideSize` value based on `itemsToShow`, `dir` and the current carousel width/height
3539

3640
## updateBreakpointsConfig()
3741

@@ -58,4 +62,4 @@ Restart the carousel settings and data, internally it calls:
5862
- `resetAutoplay`
5963
- `updateBreakpointsConfig`
6064
- `updateSlidesData`
61-
- `updateSlideWidth`
65+
- `updateSlideSize`

‎docs/config.md

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,25 @@
22

33
## Available Props
44

5-
| Prop | Default | Description |
6-
| ---------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
7-
| `itemsToShow` | 1 | count of items to showed per view (can be a fraction). |
8-
| `itemsToScroll` | 1 | number of slides to be scrolled |
9-
| `wrapAround` | false | enable infinite scrolling mode. |
10-
| `snapAlign` | 'center' | controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
11-
| `transition` | 300 | sliding transition time in ms. |
12-
| `autoplay` | 0 | Auto play time in ms. |
13-
| `breakpointMode` | 'viewport' | determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
14-
| `breakpoints` | null | an object to pass all the breakpoints settings. |
15-
| `modelValue` | 0 | index number of the initial slide. <Badge text="0.1.20"/> |
16-
| `mouseDrag` | true | toggle mouse dragging <Badge text="0.1.23"/> |
17-
| `touchDrag` | true | toggle pointer touch dragging <Badge text="0.1.23"/> |
18-
| `pauseAutoplayOnHover` | false | toggle if auto play should pause on mouse hover <Badge text="0.1.25"/> |
19-
| `dir` | ltr | controls the carousel direction. Available values 'ltr', 'rtl' <Badge text="0.1.38"/> |
20-
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
21-
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
5+
| Prop | Default | Description |
6+
| ---------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7+
| `itemsToShow` | 1 | Count of items to showed per view (can be a fraction). |
8+
| `itemsToScroll` | 1 | Number of slides to be scrolled |
9+
| `wrapAround` | false | Enable infinite scrolling mode. |
10+
| `snapAlign` | 'center' | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
11+
| `transition` | 300 | Sliding transition time in ms. |
12+
| `autoplay` | 0 | Auto play time in ms. |
13+
| `breakpointMode` | 'viewport' | Determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
14+
| `breakpoints` | null | An object to pass all the breakpoints settings. |
15+
| `modelValue` | 0 | Index number of the initial slide. |
16+
| `mouseDrag` | true | Toggle mouse dragging |
17+
| `touchDrag` | true | Toggle pointer touch dragging |
18+
| `pauseAutoplayOnHover` | false | Toggle if auto play should pause on mouse hover |
19+
| `dir` | 'ltr' | Controls the carousel direction. Available values: 'ltr', 'rtl', 'ttb', 'btt' or use verbose 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' <Badge text="0.7.0"/> |
20+
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
21+
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
22+
| `height` | 'auto' | Carousel track height. <Badge text="0.7.0"/> |
23+
2224

2325
## Slots
2426

@@ -56,11 +58,12 @@ Used to add display carousel addons components.
5658

5759
### Slots Attributes
5860

59-
| Prop | Description |
60-
| -------------- | ------------------------------------ |
61-
| `slideWidth` | the width of a single slide element. |
62-
| `currentSlide` | index number of the current slide. |
63-
| `slidesCount` | the count of all slides |
61+
| Prop | Description |
62+
| ---------------- | ------------------------------------------------------------------------------------------- |
63+
| ~~`slideWidth`~~ | ~~the width of a single slide element.~~ <Badge type="danger" text="Rename to slideSize"/> |
64+
| `slideSize` | the width/height of a single slide element. |
65+
| `currentSlide` | index number of the current slide. |
66+
| `slidesCount` | the count of all slides |
6467

6568
#### Example
6669

‎docs/examples.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88

99
<Example id="vue3-carousel-example-wrap-around" />
1010

11+
## Vertical
12+
13+
<Example id="vue3-carousel-example-vertical" />
14+
1115
## Breakpoints
1216

1317
<Example id="vue3-carousel-example-breakpoints" ></Example>

‎docs/examples/ExampleActiveClasses.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const config = {
3333
3434
.carousel__track {
3535
transform-style: preserve-3d;
36+
width: 100%;
3637
}
3738
3839
.carousel__slide--sliding {

‎docs/examples/ExampleBasic.vue

Lines changed: 2 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,11 @@
11
<script setup>
22
import { Carousel, Pagination, Navigation, Slide } from '../../dist/carousel.es'
33
import '../../dist/carousel.css'
4-
const config1 = {
5-
itemsToShow: 3,
6-
modelValue: 2,
7-
snapAlign: 'start',
8-
gap: 20,
9-
}
10-
const config2 = {
11-
itemsToShow: 3,
12-
modelValue: 2,
13-
snapAlign: 'center-odd',
14-
gap: 20,
15-
}
16-
const config3 = {
17-
itemsToShow: 3,
18-
modelValue: 2,
19-
snapAlign: 'center-even',
20-
gap: 20,
21-
}
22-
const config4 = {
23-
itemsToShow: 3,
24-
modelValue: 2,
25-
snapAlign: 'end',
26-
gap: 20,
27-
}
4+
const config = {}
285
</script>
296

307
<template>
31-
<Carousel v-bind="config1">
32-
<Slide v-for="slide in 10" :key="slide">
33-
<div class="carousel__item">{{ slide }}</div>
34-
</Slide>
35-
36-
<template #addons>
37-
<Navigation />
38-
<Pagination />
39-
</template>
40-
</Carousel>
41-
42-
<Carousel v-bind="config2">
43-
<Slide v-for="slide in 10" :key="slide">
44-
<div class="carousel__item">{{ slide }}</div>
45-
</Slide>
46-
47-
<template #addons>
48-
<Navigation />
49-
<Pagination />
50-
</template>
51-
</Carousel>
52-
<Carousel v-bind="config3">
53-
<Slide v-for="slide in 10" :key="slide">
54-
<div class="carousel__item">{{ slide }}</div>
55-
</Slide>
56-
57-
<template #addons>
58-
<Navigation />
59-
<Pagination />
60-
</template>
61-
</Carousel>
62-
63-
<Carousel v-bind="config4">
8+
<Carousel v-bind="config">
649
<Slide v-for="slide in 10" :key="slide">
6510
<div class="carousel__item">{{ slide }}</div>
6611
</Slide>

‎docs/examples/ExampleGallery.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const galleryConfig = {
1818
const thumbnailsConfig = {
1919
itemsToShow: 7,
2020
wrapAround: true,
21+
height: 100,
2122
gap: 10,
2223
}
2324
</script>
@@ -44,8 +45,8 @@ const thumbnailsConfig = {
4445
<style>
4546
#thumbnails {
4647
margin-top: 10px;
47-
.carousel__item {
48-
min-height: 100px;
48+
.carousel__track {
49+
min-height: auto;
4950
}
5051
}
5152
</style>

‎docs/examples/ExampleVertical.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup>
2+
import { Carousel, Pagination, Navigation, Slide } from '../../dist/carousel.es'
3+
import '../../dist/carousel.css'
4+
const config = {
5+
dir: 'top-to-bottom',
6+
wrapAround: true,
7+
itemsToShow: 2,
8+
snapAlign: 'center',
9+
gap: 5,
10+
height: 300,
11+
}
12+
</script>
13+
14+
<template>
15+
<Carousel v-bind="config">
16+
<Slide v-for="slide in 10" :key="slide">
17+
<div class="carousel__item">{{ slide }}</div>
18+
</Slide>
19+
20+
<template #addons>
21+
<Navigation />
22+
<Pagination />
23+
</template>
24+
</Carousel>
25+
</template>

‎docs/examples/ExampleWrapAround.vue

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,15 @@
11
<script setup>
22
import { Carousel, Pagination, Navigation, Slide } from '../../dist/carousel.es'
33
import '../../dist/carousel.css'
4-
const config1 = {
4+
const config = {
55
itemsToShow: 3,
6-
modelValue: 2,
7-
snapAlign: 'start',
8-
wrapAround: true,
9-
gap: 20,
10-
}
11-
const config2 = {
12-
itemsToShow: 3,
13-
modelValue: 2,
14-
snapAlign: 'center-odd',
15-
wrapAround: true,
16-
gap: 20,
17-
}
18-
const config3 = {
19-
itemsToShow: 3,
20-
modelValue: 2,
21-
snapAlign: 'center-even',
22-
wrapAround: true,
23-
gap: 20,
24-
}
25-
const config4 = {
26-
itemsToShow: 3,
27-
modelValue: 2,
28-
snapAlign: 'end',
296
wrapAround: true,
307
gap: 20,
318
}
329
</script>
3310

3411
<template>
35-
<Carousel v-bind="config1">
36-
<Slide v-for="slide in 10" :key="slide">
37-
<div class="carousel__item">{{ slide }}</div>
38-
</Slide>
39-
40-
<template #addons>
41-
<Navigation />
42-
<Pagination />
43-
</template>
44-
</Carousel>
45-
46-
<Carousel v-bind="config2">
47-
<Slide v-for="slide in 10" :key="slide">
48-
<div class="carousel__item">{{ slide }}</div>
49-
</Slide>
50-
51-
<template #addons>
52-
<Navigation />
53-
<Pagination />
54-
</template>
55-
</Carousel>
56-
<Carousel v-bind="config3">
57-
<Slide v-for="slide in 10" :key="slide">
58-
<div class="carousel__item">{{ slide }}</div>
59-
</Slide>
60-
61-
<template #addons>
62-
<Navigation />
63-
<Pagination />
64-
</template>
65-
</Carousel>
66-
<Carousel v-bind="config4">
12+
<Carousel v-bind="config">
6713
<Slide v-for="slide in 10" :key="slide">
6814
<div class="carousel__item">{{ slide }}</div>
6915
</Slide>

0 commit comments

Comments
 (0)