slider

<template>
  <div class="teachers">
    <img class="teacher-back" src="@/static/img/teacher-back.jpg" alt="">
    <div class="container">
      <div class="title d-flex align-items-center justify-content-between" >
        <h3 class="mb-0">{{ $t('teachers.text') }}</h3>
        <div class="arrows d-flex align-items-center justify-content-between mr-3">
          <div class="slide-count-wrap">
            <span class="current">{{currentTeacher}}</span> /
            <span class="total">{{teachers.length}}</span>
          </div>
          <div class="slide-arrow">
            <svg @click="showPrev" style="cursor: pointer" class=" slick-arrow-prev" width="34" height="13" viewBox="0 0 34 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67755 1.21876L0.727806 5.97188C0.424065 6.26355 0.424065 6.73645 0.727806 7.02812L5.67755 11.7812C5.98129 12.0729 6.47375 12.0729 6.7775 11.7812C7.08124 11.4896 7.08124 11.0167 6.7775 10.725L3.1555 7.24688H32.7531C33.1656 7.24688 33.5 6.91249 33.5 6.5C33.5 6.08751 33.1656 5.75312 32.7531 5.75312H3.1555L6.7775 2.27501C7.08124 1.98333 7.08124 1.51043 6.7775 1.21876C6.47375 0.927081 5.98129 0.927081 5.67755 1.21876Z" fill="#46A1F6" stroke="#46A1F6" stroke-linecap="round"/>
            </svg>
            <svg @click="showNext" style="cursor: pointer" class=" slick-arrow-next"  width="34" height="13" viewBox="0 0 34 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M28.3224 1.21876L33.2722 5.97188C33.5759 6.26355 33.5759 6.73645 33.2722 7.02812L28.3224 11.7812C28.0187 12.0729 27.5262 12.0729 27.2225 11.7812C26.9188 11.4896 26.9188 11.0167 27.2225 10.725L30.8445 7.24688H1.24688C0.83439 7.24688 0.5 6.91249 0.5 6.5V6.5C0.5 6.08751 0.834392 5.75312 1.24688 5.75312H30.8445L27.2225 2.27501C26.9188 1.98333 26.9188 1.51043 27.2225 1.21876C27.5262 0.927081 28.0187 0.927081 28.3224 1.21876Z" fill="#46A1F6" stroke="#46A1F6" stroke-linecap="round"/>
            </svg>

          </div>

        </div>
      </div>

      <div class="body" >
        <VueSlickCarousel v-bind="slickOptions1" ref="carousel" @afterChange="changed">
          <div class="card" v-for="(teacher, index) in teachers" :key="index">
            <div class="img-wrapper">
              <img :src="teacher.img" alt="">
            </div>
            <div class="card-body">
<!--              <p>{{ $t(teacher.name) }}</p>-->
<!--              <p class="text-muted">{{ $t(teacher.title) }}</p>-->
              <p>{{ teacher[$i18n.locale].name }}</p>
              <p class="text-muted">{{ teacher[$i18n.locale].title }}</p>

            </div>
          </div>

        </VueSlickCarousel>
      </div>

    </div>
  </div>
</template>

<script>

import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
import VueSlickCarousel from "vue-slick-carousel";

export default {
  name: "teachers",
  props: {
    teachers: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      slickOptions1: {
        "dots": false,
        "slidesToScroll": 1,
        "arrows": false,
        "swipeToSlide": true,
        "centerMode": false,
        "focusOnSelect": false,
        "infinite": true,
        "slidesToShow": 4,
        "autoplay": false,
        "autoplaySpeed": 3000,
        "speed": 500,
        responsive: [
          {
            breakpoint: 1325,
            settings: {
              slidesToShow: 4
            }
          },
          {
            breakpoint: 1200,
            settings: {
              slidesToShow: 3
            }
          },
          {
            breakpoint: 991,
            settings: {
              slidesToShow: 2
            }
          },
          {
            breakpoint: 768,
            settings: {
              arrows: false,
              dots: false,
              slidesToShow: 1,
              "centerPadding": "0px",
            }
          },
        ]
      },
      currentTeacher: 1,
    }
  },
  components: {
    VueSlickCarousel
  },
  methods: {
    showNext() {
      this.$refs.carousel.next()
    },
    showPrev() {
      this.$refs.carousel.prev()
    },
    changed(index) {
      this.currentTeacher = index + 1
    }
  },

}
</script>

<style lang="scss" scoped>

@media screen and (max-width: 1000px) {
  .card-body {
    background: #FFFFFF;
    border-radius: 18px;
    text-align: center;
    margin-top: 0 !important;
    padding-top: 45px;
    padding-bottom: 36px;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 98% !important;
  }
  .img-wrapper {
    height: 122px;
    width: 122px;
    margin-right: 25px;
  }
}
@media screen and (max-width: 768px) {
  .slick-arrow-prev{
    margin-right: -5px;
  }

  .card {
    flex-direction: row !important;

    .card-body{
      text-align: left;
      margin-left: 10px;
      padding-left: 10px !important;
      padding-top: 25px;
      padding-bottom: 25px;
      margin-top: -8px !important;

      p{
        padding-bottom: 0px;
      }
    }
    .img-wrapper {
      height: 74px !important;
      width: 91px;

    }
  }
}

</style>