Skip to content

Commit

Permalink
feat(pagination): add option to add custom title in pagination buttons
Browse files Browse the repository at this point in the history
* Clean up to prepare for test script refactor (#330)

* fix(precommit): use jest exit code

* fix(jest): restore coverage collection context

* chore(package.json): remove phased out test tools

* style(eslint): commit eslint fixes (#336)

* feat: add watcher to Autoplay Prop (#344)

* fix(carousel): flush the slides left when they don't fill the width (#323)

* fix(carousel): Flush the slides left when they don't fill the width (#323)

When there are too few slides to fill the row, with scrollPerPage, the slides were flushed right instead of left.
By bounding maxOffest to a minimum of 0, the slides are aligned on the left-hand-side

Fix #323

* style(play): Use capitals in tests for consistency

* v0.16.1

* chore: build

* feat(standard): watch autoplay prop and enable/disable autoplay

* feat(pagination) added an option to add custom title in pagination buttons

* updated test snapshots

* fixed wrong conflict resolution of carousel.vue
  • Loading branch information
VojtechKlos authored and quinnlangille committed Dec 20, 2018
1 parent de9a54a commit d0a06c1
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 18 deletions.
2 changes: 1 addition & 1 deletion dist/vue-carousel.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/themes/vue/source/js/vue-carousel.min.js

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions play/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -412,3 +412,22 @@ play("Carousel", module)
.add("Pagination position bottom-overlay", h => createContainer(
h, containerWidth, [h(Carousel, { props: { paginationPosition: 'bottom-overlay' } }, generateSlideImages(h))]
))
.add("With custom pagination titles", {
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;">
<slide v-for="(slide, index) in slides" :key="slide" :title="'This is my slide #' + index ">
<img style="width: 100%;" :src="slide" />
</slide>
</carousel>
</div>`,
components: {
Carousel,
Slide
},
data() {
return {
slides: images
}
}
})
17 changes: 14 additions & 3 deletions src/Pagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
class="VueCarousel-dot"
aria-hidden="false"
role="tab"
:title="`Item ${index}`"
:value="`Item ${index}`"
:aria-label="`Item ${index}`"
:title="getDotTitle(index)"
:value="getDotTitle(index)"
:aria-label="getDotTitle(index)"
:aria-selected="isCurrentDot(index) ? 'true' : 'false'"
v-bind:class="{ 'VueCarousel-dot--active': isCurrentDot(index) }"
v-on:click="goToPage(index)"
Expand Down Expand Up @@ -74,6 +74,17 @@ export default {
*/
isCurrentDot(index) {
return index === this.carousel.currentPage;
},
/**
* Generate dot title
* @param {number} index - dot index
* @return {string}
*/
getDotTitle(index) {
return this.carousel.$children[index].title
? this.carousel.$children[index].title
: `Item ${index}`;
}
}
};
Expand Down
1 change: 1 addition & 0 deletions src/Slide.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<script>
export default {
name: "slide",
props: ["title"],
data() {
return {
width: null
Expand Down
14 changes: 1 addition & 13 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2744,11 +2744,6 @@ decode-uri-component@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"

dedent@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=

deep-extend@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
Expand Down Expand Up @@ -3169,7 +3164,7 @@ escape-string-applescript@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/escape-string-applescript/-/escape-string-applescript-2.0.0.tgz#760bca838668e408fe5ee52ce42caf7cb46c5273"

escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.4, escape-string-regexp@^1.0.5:
escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"

Expand Down Expand Up @@ -8026,13 +8021,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"

simple-git@^1.85.0:
version "1.107.0"
resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.107.0.tgz#12cffaf261c14d6f450f7fdb86c21ccee968b383"
integrity sha512-t4OK1JRlp4ayKRfcW6owrWcRVLyHRUlhGd0uN6ZZTqfDq8a5XpcUdOKiGRNobHEuMtNqzp0vcJNvhYWwh5PsQA==
dependencies:
debug "^4.0.1"

sisteransi@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-0.1.1.tgz#5431447d5f7d1675aac667ccd0b865a4994cb3ce"
Expand Down

0 comments on commit d0a06c1

Please sign in to comment.