Skip to content

Commit 46a6763

Browse files
tmorehousetmorehouse
authored
feat(carousel): add support for swipe on touch screens (#2409)
1 parent 19b4d01 commit 46a6763

File tree

7 files changed

+349
-137
lines changed

7 files changed

+349
-137
lines changed

‎src/components/carousel/README.md

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,16 @@ supported sliding inteval is 1000ms (1 second).
109109
In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/)
110110
is supported, the carousel will avoid sliding when the webpage is not visible to
111111
the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
112+
Sliding will resume when the browser tab is active.
112113

113114
### Pausing the carousel
114115
To pause the carousel from auto sliding, set the `interval` prop to `0`. To restart a
115116
paused carousel, set the `interval` back to the desired number of ms.
116117

118+
When the carousel is paused, the user can still switch slides via the controls (if enabled) or
119+
touch swipe (on touch enabled devices, if not disabled).
120+
121+
117122
## Controls and Indicators
118123
Set the prop `controls` to enable the previous and next control buttons.
119124

@@ -122,8 +127,12 @@ Set the prop `indicators` to show the slide indicator buttons.
122127
Both indicators and controls can be set at the same time or independently.
123128

124129

125-
## Crossfade animation
126-
Set the `<b-carousel>` `fade` prop to true to animate slides with a fade transition
130+
## Carousel animation
131+
Carousel, by default, uses a sliding animation. You can change teh slide animation to
132+
a cross-fade animation, or disable animation completely.
133+
134+
### Crossfade animation
135+
Set the `<b-carousel>` `fade` prop to `true` to animate slides with a fade transition
127136
instead of the default slide animation.
128137

129138
```html
@@ -152,6 +161,38 @@ instead of the default slide animation.
152161
<!-- carousel-fade.vue -->
153162
```
154163

164+
### Disable animation
165+
Set the `<b-carousel>` `no-animation` prop to `true` to disable slide animation.
166+
167+
```html
168+
<div>
169+
<b-carousel id="carousel-no-anim"
170+
style="text-shadow: 0px 0px 2px #000"
171+
no-animation
172+
indicators
173+
img-width="1024"
174+
img-height="480">
175+
<b-carousel-slide caption="First slide"
176+
img-src="https://picsum.photos/1024/480/?image=10">
177+
</b-carousel-slide>
178+
<b-carousel-slide caption="Second Slide"
179+
img-src="https://picsum.photos/1024/480/?image=12">
180+
</b-carousel-slide>
181+
<b-carousel-slide caption="Third Slide"
182+
img-src="https://picsum.photos/1024/480/?image=22">
183+
</b-carousel-slide>
184+
<b-carousel-slide caption="Fourth Slide"
185+
img-src="https://picsum.photos/1024/480/?image=23">
186+
</b-carousel-slide>
187+
</b-carousel>
188+
</div>
189+
190+
<!-- carousel-no-anim.vue -->
191+
```
192+
193+
## Touch swipe support
194+
On touch enabled devices, users can switch slides by swiping left or right on the carousel.
195+
To disable touch control, set the `no-touch` prop to `true`.
155196

156197
## V-model support
157198
Programmaticaly control which slide is showing via `v-model` (which binds to the

‎src/components/carousel/carousel-slide.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import BImg from '../image/img'
22
import idMixin from '../../mixins/id'
3+
import { hasTouchSupport } from '../../utils/env'
34

45
// @vue/component
56
export default {
@@ -9,7 +10,12 @@ export default {
910
inject: {
1011
carousel: {
1112
from: 'carousel',
12-
default: function () { return {} }
13+
default: function () {
14+
return {
15+
// Explicitly disable touch if not a child of carousel
16+
noTouch: true
17+
}
18+
}
1319
}
1420
},
1521
props: {
@@ -66,6 +72,9 @@ export default {
6672
// default: undefined
6773
}
6874
},
75+
data () {
76+
return {}
77+
},
6978
computed: {
7079
contentClasses () {
7180
return [
@@ -84,6 +93,7 @@ export default {
8493
},
8594
render (h) {
8695
const $slots = this.$slots
96+
const noDrag = !this.carousel.noTouch && hasTouchSupport
8797

8898
let img = $slots.img
8999
if (!img && (this.imgSrc || this.imgBlank)) {
@@ -99,7 +109,9 @@ export default {
99109
width: this.computedWidth,
100110
height: this.computedHeight,
101111
alt: this.imgAlt
102-
}
112+
},
113+
// Touch support event handler
114+
on: noDrag ? { dragstart: e => { e.preventDefault() } } : {}
103115
}
104116
)
105117
}
@@ -120,7 +132,7 @@ export default {
120132
return h(
121133
'div',
122134
{
123-
class: [ 'carousel-item' ],
135+
staticClass: 'carousel-item',
124136
style: { background: this.background || this.carousel.background || null },
125137
attrs: { id: this.safeId(), role: 'listitem' }
126138
},

0 commit comments

Comments
 (0)