Code-Create/src/pages/events/swiper.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
import '@kagol/vue-carousel/dist/style.css'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let list = ref([
	{
		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
	},
	{
		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
	},
	{
		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
	},
	{
		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
	},
])
const activePage = ref(0)
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<section class="events-swiper">
		<div class="content">
			<KagolCarousel
				:autoplay="false"
				:interval="1000"
				class="events-carousel"
			>
				<div class="carousel-item" v-for="(item,index) in list" :key="index">
					<div class="img-box">
						<img :src="item.url" alt="">
					</div>
					<div class="text-box">
						<h4 class="title">
							Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create				
						</h4>
						<div class="info">
							Honored to be selected as a Alibaba JUMPSTARTER 2026 Top 30 Startup |...		
						</div>
						<a href="#" class="read-more" target="_blank">
							Read More
							<span class="iconfont icon-direction-right"></span>
						</a>
					</div>
				</div>
				
				<template #pagination="{ prevPage, nextPage }">
					<div class="prev-page" @click="prevPage">
						<span class="iconfont icon-direction-left"></span>
					</div>
					<div class="next-page" @click="nextPage">
						<span class="iconfont icon-direction-right"></span>
					</div>
				</template>
				<template #indicator></template>
			</KagolCarousel>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.events-swiper{
		width: 100%;
		background-color: #f9f9f9;
		> .content{
			padding: 40px 0px 40px 0px;
			margin: 0 auto;
			max-width: 1120px;
			position: relative;
			> .events-carousel{
				.carousel-item{
					overflow: hidden;
					cursor: pointer;
					&:hover{
						img{
							transform: scale(1.1);
						}
					}
					.img-box{
						border-radius: 20px;
						height: 600px;
						width: 100%;
						overflow: hidden;
						img{
							width: 100%;							
							height: 100%;
							object-fit: cover;
							background-color: #FFF;
							transition: all .3s;
						}
					}
					> .text-box{
						margin-top: -40px;	
						padding: 25px;
						width: 560px;
						background-color: #fff;
						position: relative;
						z-index: 22;
						.title{
							font-family: Poppins, sans-serif;
							font-weight: 600;
							letter-spacing: 2px;
							color: #222222;
							text-transform: capitalize;
							font-size: 20px;
							margin-bottom: 9px;
						}
						.info{
							color: #555;
							font-size: 16px;
							margin-bottom: 15px;
						}
						.read-more{
							color: #9A2125;
							box-shadow: none;
							font-size: 14px;
							text-decoration: none;
							position: relative;
							&:hover{

							}
							&::after{
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 2px;
								background-color: #9A2125;
								transition: all .3s;
							}
							> span{
								margin-left: 10px;
							}
						}
					}
				}
			}
			.prev-page, .next-page{
				width: 96px;
				height: 96px;
				margin: 0 10px;
				border: 1px solid #e1e1e1;
				background-color: #fff;
				border-radius: 50%;
				transition: all .3s;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 0;
				> span{
					font-size: 38px;
				}
				&:hover{
					border: 1px solid #000;
				}
			}
			.prev-page{
				right: 112px;
			}
			.next-page{
				right: 0;
			}
		}
	}
</style>