update

src/components/TestSwiper.vue

@@ -0,0 +1,91 @@
+<template>
+    <swiper
+    :modules="modules"
+    :slides-per-view="1"
+    :space-between="0"
+    navigation
+    :autoplay=" { delay: 2500, disableOnInteraction: false}"
+    @swiper="onSwiper"
+    @slideChange="onSlideChange"
+    >
+      <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
+      <img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
+      </swiper-slide>
+      <!-- <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
+      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
+      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
+      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
+      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide> -->
+      
+        </swiper>
+  </template>
+  <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,
+            faqHome: null,
+            themes:null,
+            lessonplan:null,
+            stories: null,
+            ideas: null,
+            worksheets: null,
+            videos: null,
+            youtube: null,
+            audio: null,
+            isLoading: true,
+
+        }
+    },
+      mounted: function () {
+        fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
+            .then(response => response.json())
+            .then(data => {
+                this.lessonplan = data.data
+                // this.isLoading = false
+                // console.log(this.lessonplan)
+                // return this.page[0].id
+            })
+            fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
+            .then(resp => resp.json())
+            .then(data => {
+                this.faqHome=data.data
+                // console.log(this.faqHome)
+            })
+        },
+    };
+  </script>