Как правильно переписать функцию, чтобы при клике по кнопке следующий срабатывал скролл блока?
<template>
<div class="banners">
<div ref="bannerScroll" class="banners-scroll">
<div class="banners-list">
<div class="banner-item">
<div
class="banner-item__image"
:style="{
'background-image':
'url(' +
require('~/assets/webassets/banners/banner-4.jpg') +
')'
}"
/>
<div class="banner-item">
<div
class="banner-item__image"
:style="{
'background-image':
'url(' +
require('~/assets/webassets/banners/banner-3.jpg') +
')'
}"
/>
</div>
</div>
</div>
<div class="banners-nav__arrow prev" style="display: none">
<svg>
<use href="#arrow-p" />
</svg>
</div>
<div class="banners-nav__arrow next" @click.prevent="nextBanner()">
<svg>
<use href="#arrow-n" />
</svg>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isVisibleNext: true,
isVisiblePrev: false
}
},
methods: {
nextBanner () {
const scrollLeft = parseInt($('.banners-scroll').scrollLeft())
$('.banners-scroll').animate({ scrollLeft: scrollLeft + 750 }, 250, 'swing', function () {
if (($('.banners-scroll').scrollLeft() + 870) == $('.banners-list').width()) {
this.isVisibleNext = !this.isVisibleNext
}
})
}
}
}
</script>
думал как-то так, но выходит полный бред
const $scroll = this.$refs.bannerScroll.scrollLeft
this.$refs.bannerScroll.scrollTo({
left: $scroll + 750,
behavior: 'smooth',
function () {
if ((this.$refs.bannerScroll.scrollLeft + 840) === this.$refs.bannerList.width()) {
this.isVisibleNext = !this.isVisibleNext
}
}
})
this.isVisiblePrev = true