Skip to content

Commit

Permalink
feat(pagination): add active class
Browse files Browse the repository at this point in the history
  • Loading branch information
@toddlawton
toddlawton committed Mar 14, 2017
1 parent af7981b commit 4fbbe21
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/Carousel.vue
View file
Expand Up @@ -469,4 +469,4 @@
flex-direction: row;
backface-visibility: hidden;
}
</style>
</style>
1 change: 1 addition & 0 deletions src/Pagination.vue
View file
Expand Up @@ -3,6 +3,7 @@
<div class="VueCarousel-dot-container">
<div
class="VueCarousel-dot"
v-bind:class="{ 'VueCarousel-dot--active': (index === parentContainer.currentPage) }"
v-for="(page, index) in parentContainer.pageCount"
v-on:click="parentContainer.goToPage(index)"
:style="`
Expand Down
12 changes: 6 additions & 6 deletions tests/client/components/__snapshots__/carousel.spec.js.snap
View file
Expand Up @@ -38,7 +38,7 @@ exports[`Carousel should begin autoplaying when option specified 1`] = `
|
.VueCarousel-pagination
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
Expand All @@ -56,7 +56,7 @@ exports[`Carousel should decrease current slide number by 1 when advance page ba
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
//
"
Expand All @@ -71,7 +71,7 @@ exports[`Carousel should fall back to default slides per page when no responsive
|
.VueCarousel-pagination(style=\'\')
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
Expand All @@ -89,7 +89,7 @@ exports[`Carousel should increase current slide number by 1 when advance page is
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
//
"
Expand All @@ -105,7 +105,7 @@ exports[`Carousel should increase current slide number by 1 when advance page is
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
//
"
Expand Down Expand Up @@ -136,7 +136,7 @@ exports[`Carousel should register 3 slides when 3 slides are added to the slots
|
.VueCarousel-pagination
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
Expand Down
10 changes: 5 additions & 5 deletions tests/client/components/__snapshots__/navigation.spec.js.snap
View file
Expand Up @@ -6,7 +6,7 @@ exports[`Navigation should mount successfully 1`] = `
|
.VueCarousel-pagination
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
Expand All @@ -26,7 +26,7 @@ exports[`Navigation should render a next button 1`] = `
|
.VueCarousel-pagination
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
Expand All @@ -46,7 +46,7 @@ exports[`Navigation should render a prev button 1`] = `
|
.VueCarousel-pagination
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
Expand All @@ -68,7 +68,7 @@ exports[`Navigation should trigger page advance backward when prev is clicked 1`
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
|
.VueCarousel-navigation
Expand All @@ -88,7 +88,7 @@ exports[`Navigation should trigger page advance when next is clicked 1`] = `
.VueCarousel-dot-container
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
.VueCarousel-dot(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot.VueCarousel-dot--active(style=\'margin-top: 20px; padding: 10px;\')
.VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
|
.VueCarousel-navigation
Expand Down

0 comments on commit 4fbbe21

Please sign in to comment.