@Aslero

Как правильно переписать функцию?

Как правильно переписать функцию, чтобы при клике по кнопке следующий срабатывал скролл блока?
<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
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы