Swiper horizontal rotation grid

it is to be noted that Version of the problem

package.js

   "swiper": "^6.3.5",
    "vue-awesome-swiper": "^3.1.3",

mai.js

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

vue file

<template>
      <div class="teacherR">
        <swiper  :options="swiperOptions">
          <swiper-slide  v-for="(item, index) in teacherData"
            :key="index">
            <ul @click="teacherCourseFn(item)">
              <p>
                <img :src="item.avatar" />
              </p>
              <div>
                <h4>{
   { item.realName }}</h4>
                <li>{
   { item.brief }}</li>
                <span @click="teacherCourseFn(item)"> See the course </span>
              </div>
            </ul></swiper-slide>
       
        </swiper>
      </div>
</template>
<script>
// import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import { teacherApi } from "@/api/study/resources.js";
export default {

  data() {
    return {
     
      swiperOptions: {
        slidesPerView: 4, // Show the number 
        direction: "horizontal",
        loop: true,
        autoplay: true,
        delay: 300,
      },
    };
  },
  methods: {
  
  },
};
</script>

<style scoped lang="less">
@import "/swiper/swiper-bundle.css";
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  // height: 200px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

</style>