타이틀 영역
타이틀 영역
컨텐츠 영역 컨텐츠 영역
컨텐츠 영역 컨텐츠 영역
캐러셀
콘텐츠 슬라이드 컴포넌트입니다.
#carousel #slider #slide
HTML
<div class="main-vban-wrap bg">
<div class="inner">
<div class="vb-swiper">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
</ul>
</div>
<button type="button" class="swiper-button-prev">
<span class="sr-only">이전</span>
</button>
<button type="button" class="swiper-button-next">
<span class="sr-only">다음</span>
</button>
<div class="swiper-indicator text-center">
<div class="swiper-pagination"></div>
<a href="#" class="swiper-button-more">
<span class="sr-only">더 보기</span>
</a>
</div>
</div>
</div>
</div>
<script>
//비주얼 배너
const vbSwiper = new Swiper('.vb-swiper .swiper', {
slidesPerView: 1,
spaceBetween: 0,
speed: 400,
loop: true,
navigation: {
nextEl: '.vb-swiper .swiper-button-next',
prevEl: '.vb-swiper .swiper-button-prev',
},
pagination: {
el: ".vb-swiper .swiper-pagination",
clickable: true,
},
});
</script>Vue 컴포넌트
<template>
<div class="main-vban-wrap bg">
<div class="inner">
<div class="vb-swiper">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="in">
<div class="text">
<p class="tit">타이틀 영역 <br class="w-hide">타이틀 영역</p>
<p class="txt">컨텐츠 영역 컨텐츠 영역 <br class="w-hide">컨텐츠 영역 컨텐츠 영역</p>
<a href="#" class="krds-btn primary">버튼 영역</a>
</div>
<div class="im">
<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
<rect width="243" height="178" fill="#E6E8EA"/>
</svg>
</div>
</div>
</li>
</ul>
</div>
<button type="button" class="swiper-button-prev">
<span class="sr-only">이전</span>
</button>
<button type="button" class="swiper-button-next">
<span class="sr-only">다음</span>
</button>
<div class="swiper-indicator text-center">
<div class="swiper-pagination"></div>
<a href="#" class="swiper-button-more">
<span class="sr-only">더 보기</span>
</a>
</div>
</div>
</div>
</div>
<script>
//비주얼 배너
const vbSwiper = new Swiper('.vb-swiper .swiper', {
slidesPerView: 1,
spaceBetween: 0,
speed: 400,
loop: true,
navigation: {
nextEl: '.vb-swiper .swiper-button-next',
prevEl: '.vb-swiper .swiper-button-prev',
},
pagination: {
el: ".vb-swiper .swiper-pagination",
clickable: true,
},
});
</script>
</template>
<script setup lang="ts">
// 캐러셀 컴포넌트
// 콘텐츠 슬라이드 컴포넌트입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- carousel.html
- 카테고리
- 표시
- 난이도
- 어려움