93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<template>
|
|
<swiper class="width"
|
|
: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://management.beanstalkedu.com/assets/'+ lesson.lesson_icon" 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://management.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>
|
|
<style>
|
|
.width {
|
|
width: 400px;
|
|
display: flex;
|
|
justify-items: flex-end;
|
|
}
|
|
|
|
</style> |