<template>
  <section class="slider">
    <nav class="slider__nav">
      <div class="slider__nav-wrapper">
        <button class="slider__nav-toggle-dot" v-for='slide in sliderList' v-on:click='openSlide(slide.id)'></button>
      </div>
    </nav>

    <div class='slider__container'>
      <ul class="slider__list" v-bind:style='{left: sliderOffsetLeft + "px"}'>
        <li class="slider__slide" v-for='slide in sliderList'>
          <div class="slider__slide-container" v-bind:style='"background-image: url(" + slide.img + ")"'>
            <h1 v-html="`${slide.quote}`"></h1>
            <h5 v-html="`${slide.peopleName}`"></h5>
            <p v-html="`${slide.description}`"></p>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script src="../../Slider.js" >

</script>

<style lang="scss" scoped>
  .slider {
    position: relative;
    width: 320px;
    height: 481px;
  }
  ...

<template>
  <section class="slider">

    <nav class="slider__nav">
      <button type="button" class="slider__nav-toggle slider__nav-toggle_prev" v-on:click='prevSlide'>
        <svg class="slider__nav-toggle_image slider__nav-toggle_image-prev"  viewBox="0 0 26 46"><defs><path id="st66a" d="M541 211a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-27v27a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-30a1 1 0 0 1 1-1z"/></defs><g><g transform="rotate(-45 18.25 732.175)"><use  xlink:href="#st66a"/></g></g></svg>
      </button>
      <button type="button" class="slider__nav-toggle slider__nav-toggle_next" v-on:click='nextSlide'>
        <svg class="slider__nav-toggle_image slider__nav-toggle_image-next"  viewBox="0 0 26 46"><defs><path id="st66a" d="M541 211a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-27v27a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-30a1 1 0 0 1 1-1z"/></defs><g><g transform="rotate(-45 18.25 732.175)"><use xlink:href="#st66a"/></g></g></svg>
      </button>

      <div class="slider__nav-wrapper">
        <button class="slider__nav-toggle-dot" v-for='slide in sliderList' v-on:click='openSlide(slide.id)' :key="slide.id"></button>
      </div>
    </nav>

    <div class='slider__container'>
      <ul class="slider__list" v-bind:style='{left: sliderOffsetLeft + "px"}'>
        <li class="slider__slide" v-for='slide in sliderList' :key="slide.id">
          <img class="slider__slide-image" :src="`${slide.img}`" alt="Изображение сладера">
          <div class="slider__slide-description" v-html="`${slide.text}`"></div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script src="../../Slider.js">

</script>

<style lang="scss" scoped>
  .slider {
    position: relative;
    width: 320px;
    height: 528px;
    background-color: #111111;
  }
...

export default {
  name: 'Slider',
  data () {
    return {
      // Всего слайдов
      sliderAllCount: 0,
      // Номер активного слайда
      sliderActive: 1,
      // Отступ тела со слайдами в контейнере
      sliderOffsetLeft: 0,
      // Шаг одного слайда = его длина
      sliderOffsetStep: 0,
      // Список изображений
    }
  },
  props: [
    'sliderList'
  ],
  methods: {
    // Иницилизация слайдера
    initSlider: function () {
      let sliderBody = this.$el.querySelector('.slider__container');
      let sliderSlidies = sliderBody.querySelectorAll('.slider__slide');
      this.sliderOffsetStep = sliderBody.clientWidth;
      this.sliderAllCount = sliderSlidies.length;

      let dots = this.$el.querySelectorAll('.slider__nav-toggle-dot');
      dots.item(0).classList.add('slider__nav-toggle-dot_active');
    },

    // Открыть слайд по номеру
    openSlide: function (id) {
      if (id > 0 && id <= this.sliderAllCount) {
        this.sliderActive = id;
        this.sliderOffsetLeft = -(this.sliderActive * this.sliderOffsetStep - this.sliderOffsetStep);

        let dots = this.$el.querySelectorAll('.slider__nav-toggle-dot');
        dots.forEach( dot => dot.classList.remove('slider__nav-toggle-dot_active') );
        dots.item(id-1).classList.add('slider__nav-toggle-dot_active');
      }
    },

    // Следующий слайд
    nextSlide: function () {
      if (this.sliderActive < this.sliderAllCount) {
        this.sliderActive += 1;
        this.openSlide(this.sliderActive);
      }
    },

    // Предыдущий слайд
    prevSlide: function () {
      if (this.sliderActive > 1) {
        this.sliderActive -= 1;
        this.openSlide(this.sliderActive);
      }
    }
  },

  mounted () {
    this.initSlider();
    // Перенастройка слайдера при изменении размера окна
    window.addEventListener('resize', () => {
      this.initSlider();
      this.openSlide(this.sliderActive);
    })
  }
};