<template>
    <div>
        <div class="">
            <swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
                :modules="modules"
                :slides-per-view="1"
                :space-between="50"
                navigation
                pagination
                :scrollbar="{ draggable: true }"
                :autoplay=" { delay: 2500, disableOnInteraction: false}"
                @swiper="onSwiper"
                @slideChange="onSlideChange">
                <swiper-slide> <img class=""  src="/img/school1.jpg" alt="" /></swiper-slide>
                <swiper-slide> <img class=""  src="/img/school2.jpg" alt="" /></swiper-slide>
                <swiper-slide> <img class=""  src="/img/school3.jpg" alt="" /></swiper-slide>
                <swiper-slide> <img class=""  src="/img/school4.jpg" alt="" /></swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<style>
    .slider-width {
        width: 350px;
    }
  </style>
  <script>
     // Import Swiper Vue.js components
      import { Swiper, SwiperSlide } from 'swiper/vue';
      import 'swiper/css/navigation';
      import 'swiper/css/pagination';
      import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
  
    // Import Swiper styles
    import 'swiper/css';
    // const swiper = new Swiper('.swiper', {
    //       autoplay: {
    //         delay: 5000,
    //       },
    //     });
  
    export default {
      components: {
        Swiper,
        SwiperSlide,
      },
      setup() {
        const onSwiper = (swiper) => {
          // console.log(swiper);
        };
        const onSlideChange = () => {
          // console.log('slide change');
        };
        
        
        return {
          onSwiper,
          onSlideChange,
          modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
  
        };
      },
   data() {
     return {
         page: null,
         lessonplan:null,
         isLoading: true,
  
     }
  },
   mounted: function () {
     fetch('https://management.beanstalkedu.com/items/lesson_plan')
         .then(response => response.json())
         .then(data => {
             this.lessonplan = data.data
             // this.isLoading = false
             // console.log(this.lessonplan)
             // return this.page[0].id
         })
     },
  };
  </script>
  