|
@@ -13,9 +13,9 @@
|
|
|
<img :src="banner.pictureUrl"/>
|
|
<img :src="banner.pictureUrl"/>
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="swiper-button-prev"><i class="iconfont icon-arrow-left"></i></div>
|
|
|
|
|
- <div class="swiper-button-next"><i class="iconfont icon-arrow-right"></i></div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="swiper-button-prev"><i class="iconfont icon-arrow-left"></i></div>
|
|
|
|
|
+ <div class="swiper-button-next"><i class="iconfont icon-arrow-right"></i></div>
|
|
|
<div class="swiper-pagination swiper-pagination-bullets"></div>
|
|
<div class="swiper-pagination swiper-pagination-bullets"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -26,6 +26,7 @@
|
|
|
export default {
|
|
export default {
|
|
|
name: 'carousel',
|
|
name: 'carousel',
|
|
|
data () {
|
|
data () {
|
|
|
|
|
+ let _this = this
|
|
|
return {
|
|
return {
|
|
|
activeSlide: 0,
|
|
activeSlide: 0,
|
|
|
swiperOption: {
|
|
swiperOption: {
|
|
@@ -36,7 +37,7 @@
|
|
|
autoplayDisableOnInteraction: false,
|
|
autoplayDisableOnInteraction: false,
|
|
|
paginationClickable: true,
|
|
paginationClickable: true,
|
|
|
mousewheelControl: false,
|
|
mousewheelControl: false,
|
|
|
- effect: 'fade',
|
|
|
|
|
|
|
+ effect: 'silde',
|
|
|
lazyLoading: true,
|
|
lazyLoading: true,
|
|
|
loop: true,
|
|
loop: true,
|
|
|
prevButton: '.swiper-button-prev',
|
|
prevButton: '.swiper-button-prev',
|
|
@@ -44,16 +45,15 @@
|
|
|
onTransitionStart: (swiper) => {
|
|
onTransitionStart: (swiper) => {
|
|
|
// 不要通过vue刷新dom,会导致pagination无法刷新
|
|
// 不要通过vue刷新dom,会导致pagination无法刷新
|
|
|
// this.activeSlide = swiper.activeIndex
|
|
// this.activeSlide = swiper.activeIndex
|
|
|
- if (this.banners.data.length && swiper.activeIndex > this.banners.data.length) {
|
|
|
|
|
|
|
+ if (_this.banners.data.length && (swiper.activeIndex > _this.banners.data.length)) {
|
|
|
swiper.activeIndex = 1
|
|
swiper.activeIndex = 1
|
|
|
- }
|
|
|
|
|
- if (this.banners.data.length && swiper.activeIndex <= 0) {
|
|
|
|
|
- swiper.activeIndex = this.banners.data.length
|
|
|
|
|
|
|
+ } else if (_this.banners.data.length && swiper.activeIndex <= 0) {
|
|
|
|
|
+ swiper.activeIndex = _this.banners.data.length
|
|
|
}
|
|
}
|
|
|
let carousel = document.querySelector('.carousel')
|
|
let carousel = document.querySelector('.carousel')
|
|
|
if (carousel && carousel !== null) {
|
|
if (carousel && carousel !== null) {
|
|
|
carousel.style.backgroundColor =
|
|
carousel.style.backgroundColor =
|
|
|
- this.banners.data[swiper.activeIndex - 1].metadata['background-color']
|
|
|
|
|
|
|
+ _this.banners.data[swiper.activeIndex - 1].metadata['background-color']
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
@import '~assets/scss/variables';
|
|
@import '~assets/scss/variables';
|
|
|
|
|
|
|
|
- $carousel_width: 990px;
|
|
|
|
|
|
|
+ $carousel_width: 992px;
|
|
|
$carousel_height: 477px;
|
|
$carousel_height: 477px;
|
|
|
|
|
|
|
|
.carousel {
|
|
.carousel {
|