various fixes

This commit is contained in:
bkfox
2024-02-02 19:36:02 +01:00
parent 2a75608701
commit df41885cca
11 changed files with 149 additions and 102 deletions

View File

@ -7,18 +7,22 @@
</nav>
<nav class="a-carousel-bullets-container">
<!-- <span class="icon bullet" @click="prev" v-if="showPrevButton">
<i :class="leftButtonIcon"></i>
</span> -->
<span class="left">
<span class="icon bullet" @click="prev()" v-if="showPrev">
<i :class="leftButtonIcon"></i>
</span>
</span>
<template v-if="bullets.length > 1">
<span class="icon bullet" v-bind:key="bullet" v-for="bullet of bullets" @click="select(bullet)">
<i v-if="bullet == index" class="fa fa-circle"></i>
<i v-else class="far fa-circle"></i>
</span>
</template>
<!-- <span class="icon bullet" @click="next" v-if="showNextButton">
<i :class="rightButtonIcon"></i>
</span> -->
<span class="right">
<span class="icon bullet" @click="next()" v-if="showNext">
<i :class="rightButtonIcon"></i>
</span>
</span>
<slot name="bullets-right" :v-bind="this"></slot>
</nav>
@ -46,7 +50,6 @@
}
.a-carousel-bullets-container {
justify-content: center;
flex-grow: 1;
}
@ -54,7 +57,13 @@
cursor: pointer;
}
.a-carousel-bullets-container .bullet-right {
.a-carousel-bullets-container .left {
min-width: 2rem;
margin-right: auto;
}
.a-carousel-bullets-container .right {
min-width: 2rem;
margin-left: auto;
}
@ -128,17 +137,17 @@ export default {
computed: {
card() { return this.cards()[this.index] },
/*showPrevButton() {
showPrev() {
return this.index > 0
},
showNextButton() {
showNext() {
if(!this.cards || this.cards.length <= 1)
return false
let { count } = this.visibility
return (this.index + count) < this.cards.length
},*/
let last = this.bullets[this.bullets.length-1]
return this.index != last
},
bullets() {
if(!this.cards || !this.$refs.viewport)
@ -195,6 +204,18 @@ export default {
return card.el
},
next() {
let n = this.bullets.indexOf(this.index)
let index = this.bullets[n+1]
this.select(index)
},
prev() {
let n = this.bullets.indexOf(this.index)
let index = this.bullets[n-1]
this.select(index)
},
refresh() {
this.cards = this.getCards()
this.select(this.index)