Commit a2508db9 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '643-MbSwiper' into 'master'

Fixed MbSwiper

See merge request !170
parents daa6f4b1 ef780af8
......@@ -6,18 +6,21 @@ swiper.mb-swiper.q-px-lg(
:auto-destroy="true"
:delete-instance-on-destroy="true"
:cleanup-styles-on-destroy="true"
@slideChange="handleIndexChange"
)
// Slides
slot
// Pagination
.swiper-pagination.mb-bg-bg-light(slot="pagination")
.swiper-pagination(slot="pagination")
// Navigation
mb-icon-btn.prev-btn.q-ml-sm(
mb-icon-btn.prev-btn(
:class="{'invisible': navigation.isBeginning}"
ref="prevButton"
icon-name="west"
slot="button-prev"
)
mb-icon-btn.next-btn.q-mr-sm(
mb-icon-btn.next-btn(
:class="{'invisible': navigation.isEnd}"
ref="nextButton"
icon-name="east"
slot="button-next"
......@@ -35,21 +38,57 @@ export default {
},
data () {
return {
navigation: {
isBeginning: true,
isEnd: false
},
swiperOptions: {
spaceBetween: 16,
centeredSlides: true,
// centeredSlides: true,
slidesPerView: this.slidesPerView,
loop: true,
loop: false,
pagination: {
el: '.swiper-pagination',
type: 'fraction'
clickable: true,
renderBullet: function (index, className) {
return `<span class="${className}"></span>`
}
},
preloadImages: true,
navigation: {
nextEl: '.next-btn',
prevEl: '.prev-btn'
}
// centerInsufficientSlides: true
// breakpoints: {
// // when window width is >= 320px
// 320: {
// slidesPerView: 2,
// spaceBetween: 20
// },
// // when window width is >= 480px
// 480: {
// slidesPerView: 3,
// spaceBetween: 30
// },
// // when window width is >= 640px
// 640: {
// slidesPerView: 4,
// spaceBetween: 40
// }
// }
}
}
},
mounted () {
console.log(this.$refs.mbSwiper)
},
methods: {
handleIndexChange () {
const { isBeginning, isEnd } = this.$refs.mbSwiper.swiperInstance
this.navigation.isBeginning = isBeginning
this.navigation.isEnd = isEnd
}
}
}
</script>
......@@ -67,7 +106,39 @@ export default {
right 0
.prev-btn
left 0
.swiper-container
padding 32px 16px
.swiper-pagination
position absolute
top 0
right 16px
width auto !important
left auto !important
margin 0
& >>> .swiper-pagination-bullet
border-radius 0
width 14px
height 3px
text-align center
opacity 1
background white
& >>> .swiper-pagination-bullet-active
background $mb-blue-100
.body--dark
.swiper-pagination
& >>> .swiper-pagination-bullet
background $mb-dark
& >>> .swiper-pagination-bullet-active
background $mb-light
.body--light
.swiper-pagination
width 64px !important
border-radius $border-radius
& >>> .swiper-pagination-bullet
background $mb-light
& >>> .swiper-pagination-bullet-active
background $mb-dark
</style>
......@@ -4,8 +4,8 @@
// recent activities -----------------------------------------------------------------------------------------------
.q-my-xl
mb-headline(:title="$t('general.last_edited')")
mb-swiper(:slides-per-view="3")
mb-headline.q-mb-lg(:title="$t('general.last_edited')")
mb-swiper(:slides-per-view="4")
mb-swiper-slide(v-for="(project, i) in dummyRecentProjects" :key="i")
mb-card(
@click.native="handleClickedItem(project)"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment