114 lines
3.1 KiB
Vue
114 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<section class="container mx-auto my-16 px-4 xl:px-24">
|
|
<div class="flex flex-col lg:flex-row place-items-center place-content-between gap-y-10">
|
|
<div class="grid h-fit">
|
|
<h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
|
|
<h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today's popular lesson <br> plans specially curated for your classroom.</h1>
|
|
<div><a target="_blank" href="/lesson-plan/dailyplan" class="text-lg bg-blue-700 px-4 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
|
|
</div>
|
|
<div class="grid place-items-center">
|
|
<swiper class="slider-width cursor-pointer" 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 v-for="lesson in lessonplan" :key="lesson.id">
|
|
<img class="" lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.text-color-1 {
|
|
color: #7C4C23;
|
|
font-family: 'Quicksand';
|
|
}
|
|
.slider-width {
|
|
width: 350px;
|
|
}
|
|
@media screen and (min-width: 1500px) {
|
|
.hero-text {
|
|
font-size: 50px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1499px) {
|
|
.hero-text {
|
|
font-size: 40px;
|
|
|
|
}
|
|
}
|
|
@media screen and (max-width: 1199px) {
|
|
.hero-text {
|
|
font-size: 30px;
|
|
|
|
}
|
|
}
|
|
</style>
|
|
<script is:inline>
|
|
// 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://curriculum-app-api.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> |