Permalink
Browse files

fix(carousel): Handle changes in slide content (#809)

* [carousel-slide] content classes update

* [carousel]: Incorporate observedom mixin

Add `observedom` mixin to detect changes in slide content

* [carousel] ESLint

* [carousel] docs update

* [carousel] More fixes & features

* Update meta.json

* Update README.md

* Update carousel.vue

* update demo.js

* [carousel] update demo.html

* Update README.md

* Update meta.json

* Update carousel.vue

* Update README.md

* [carousel] minor fixes

* [carousel] oldVal fix
  • Loading branch information...
tmorehouse committed Aug 11, 2017
1 parent ab7767f commit 6949e5f764a0f0b3637257be908e92146224e763
@@ -1,54 +1,106 @@
# Carousel
**Note:** Carousel component is not stable yet.
> The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
> The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms.
It works with a series of images, text, or custom markup. It also includes support for previous/next
controls and indicators.
```html
<b-carousel controls indicators :interval="3000" background="#ABABAB" height="300px">
<template>
<div>
<b-carousel id="carousel1"
controls
indicators
background="#ababab"
:interval="4000"
v-model="slide"
@slide="onSlide"
@slid="onSlid"
>
<!-- Text slides -->
<b-carousel-slide height="300px" caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img="http://placeskull.com/600/300/ABABAB/-1/0">
</b-carousel-slide>
<!-- Text slides with image -->
<b-carousel-slide caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img="https://lorempixel.com/1024/480/technics/2/"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide height="300px" img="http://placeskull.com/600/300/1C90F3/-1/0">
Hello world
</b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img="https://lorempixel.com/1024/480/technics/4/">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image -->
<b-carousel-slide height="300px" img="http://placeskull.com/600/300/f44336/-1/0">
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img="http://lorempixel.com/1024/480/technics/8/">
</b-carousel-slide>
</b-carousel>
<!-- Slide with blank image to maintain aspect ratio -->
<b-carousel-slide caption="Blank Image" :img="blankImg(1024,480)">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
ut lacus vel interdum. Nulla bibendum tincidunt erat, sed tincidunt
magna finibus ac.
</p>
</b-carousel-slide>
<!-- carousel.vue -->
```
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
### Usage
</div>
</template>
```html
<b-carousel controls indicators :interval="3000" background="grey">
<!-- Text slides -->
<b-carousel-slide background="grey" height="300px"
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum.">
</b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide background="grey" height="300px">
Hello world
</b-carousel-slide>
<!-- Slides with image -->
<b-carousel-slide background="grey" height="300px"
img="http://placeskull.com/600/300/ABABAB/-1/0">
</b-carousel-slide>
</b-carousel>
<script>
export default {
data: {
slide: 0,
sliding: null
},
methods: {
blankImg(x, y) {
// Return a blank SVG image with specified width and height
// Handy for maintaining aspect ratio for text only slides
return "data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D" +
"'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' " +
"viewBox%3D'0 0 " + x + " " + y + "'%2F%3E";
},
onSlide(slide) {
this.sliding = true;
},
onSlid(slide) {
this.sliding = false;
}
}
}
</script>
<!-- carousel-1.vue -->
```
Carousels don’t automatically normalize slide dimensions. As such, you may need to use
additional utilities or custom styles to appropriately size content. When using images
in each slide, ensure they all have the same dimensions (or aspect ratio).
### Interval
Carousel defults to an interval of `5000`ms (5 seconds). To pause the caurousel from
auto sliding, set the `interval` prop to `0`. To restart a paused carousel, set the
`interval` back to the number of ms.
### Controls and Indicators
Set the prop `controls` to enable the previous and next control buttons.
Set the prop `indicators` to show the slide indicator buttons.
Both indicators andcontrols can be set at the same time
### V-modal support
Control which slide is howing programaticaly via `v-model` (which binds to the `value` prop
### Accessibility
By providing a document unique value via the `id` prop, `<b-carousel>` will enable accessibility
features. It is highly recommended to always add an ID to all components.
@@ -1,5 +1,27 @@
{
"title": "Carousel",
"component": "bCarousel",
"components": ["bCarouselSlide"]
"components": ["bCarouselSlide"],
"events": [
{
"event": "slide",
"description": "Emitted when transitioning to a new slide has started.",
"args": [
{
"arg": "slide",
"description": "Slide number that is being slid to."
}
]
},
{
"event": "slid",
"description": "Emitted when transitioning to a new slide has finished.",
"args": [
{
"arg": "slide",
"description": "Slide number that was slid to."
}
]
}
]
}
@@ -1,21 +1,37 @@
<div id="app">
<b-carousel controls indicators :interval="3000" background="grey">
<b-carousel id="carousel1"
ref="carousel1"
controls
indicators
:interval="3500"
v-model="slide"
@slide="onSlide"
@slid="onSlid"
background="grey">
<!-- Text slides -->
<b-carousel-slide background="grey" height="300px"
<b-carousel-slide :img="blankImg(1024,480)"
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum.">
</b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide background="grey" height="300px">
Hello world
<b-carousel-slide :img="blankImg(1024,480)">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image -->
<b-carousel-slide background="grey" height="300px"
img="http://placeskull.com/600/300/ABABAB/-1/0">
<b-carousel-slide img="https://lorempixel.com/1024/480/technics/2/">
</b-carousel-slide>
<!-- Slides with image -->
<b-carousel-slide img="https://lorempixel.com/1024/480/technics/4/">
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Is Sliding: {{ sliding }}
</p>
</div>
@@ -1,3 +1,22 @@
window.app = new Vue({
el: '#app'
el: '#app',
data: {
slide: 0,
sliding: null
},
methods: {
blankImg(x, y) {
// Return a blank SVG image with specified width and height
// Handy for maintaining aspect ratio for text only slides
return "data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D" +
"'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' " +
"viewBox%3D'0 0 " + x + " " + y + "'%2F%3E";
},
onSlide(slide) {
this.sliding = true;
},
onSlid(slide) {
this.sliding = false;
}
}
});
@@ -55,14 +55,11 @@
},
computed: {
contentClasses() {
const classes = {
'carousel-caption': Boolean(this.caption)
};
if (this.contentVisibleUp) {
classes['d-none'] = true;
classes[`d-${this.contentVisibleUp}-block`] = true;
}
return classes;
return [
'carousel-caption',
this.contentVisibleUp ? 'd-none' : '',
this.contentVisibleUp ? `d-${this.contentVisibleUp}-block` : ''
];
}
}
};
Oops, something went wrong.

0 comments on commit 6949e5f

Please sign in to comment.