728x90
반응형
이어서 Carousel(캐러셀)의 설정을 변경하고 컨트롤 기능을 추가하여 커스터마이징을 하겠습니다.
슬라이드 페이드(fade) 처리
Carousel(캐러셀)는 오른쪽에서 왼쪽으로 슬라이드가 됩니다. 슬라이드 대신에 페이드(fade)로 처리되길 원하신다면 class에 .carousel-fade를 추가하면 슬라이드가 페이드(fade)로 처리됩니다.
<div id="mainTopCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
슬라이드 연속 진행 설정
Carousel(캐러셀) 안으로 마우스를 들어오면(mouseenter) 슬라이드가 멈추(pause sliding)고 Carousel(캐러셀) 밖으로 마우스 나가면(mouseleave) 슬라이드가 다시 슬라이드가 진행(resume sliding) 됩니다.
마우스의 이벤트(mouseenter, mouseleave)와 상관없이 계속 슬라이드가 되길 원한다면 data-bs-pause 속성을 적용하면 됩니다. data-bs-pause 속성의 값으로 "false"를 설정하면 됩니다.
<div id="mainTopCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
슬라이드 컨트롤하기
Carousel(캐러셀)를 컨트롤하여 진행시키거나 중지시키거나 이전과 다음 콘텐츠 영역(.carousel-item가 적용된 <div> 태그)으로 이동시킬 수 있습니다.
스크립트에서 Carousel(캐러셀)를 컨트롤하기 위해서는 Carousel(캐러셀)의 인스턴스(Instance)를 얻어야 합니다.
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
그리고 Carousel(캐러셀)의 메서드를 사용하여 컨트롤합니다.
cycle() 메서드는 콘텐츠 영역(.carousel-item가 적용된 <div> 태그) 순환(슬라이드) 시킵니다.
pause() 메서드는 순환(슬라이드)을 중지시킵니다.
prev() 메서드는 이전 콘텐츠 영역(.carousel-item가 적용된 <div> 태그)으로 이동시킵니다.
next() 메서드는 다음 콘텐츠 영역(.carousel-item가 적용된 <div> 태그)으로 이동시킵니다.
1. .home이 적용된 <div> 태그 안에 Carousel(캐러셀)의 컨트롤할 버튼들을 추가합니다.
<div class="home">
<div class="my-3">
<button class="button" @click="mainTopCarouselPlayClick"><i class="bi bi-play-fill"></i> 시작</button>
<button class="button" @click="mainTopCarouselPauseClick"><i class="bi bi-stop-fill"></i> 중지</button>
<button class="button" @click="mainTopCarouselPrevClick"><i class="bi bi-chevron-left"></i> 이전</button>
<button class="button" @click="mainTopCarouselNextClick"><i class="bi bi-chevron-right"></i> 다음</button>
</div>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
2. <script>의 methods에 버튼 클릭 이벤트를 추가합니다.
methods : {
mainTopCarouselPlayClick() {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
carousel.cycle();
},
mainTopCarouselPauseClick() {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
carousel.pause();
},
mainTopCarouselPrevClick() {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
carousel.prev();
},
mainTopCarouselNextClick() {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
carousel.next();
}
}JQuery를 사용하지 않고 있어 접근법이 다릅니다.
다음에는 JQuery를 설치하여 진행하겠습니다.
영상에서 보시면 컨트롤 버튼을 통해 Carousel(캐러셀)이 컨트롤되는 것을 확인할 수 있습니다.
Indicator(인디게이터) Customizing(커스터마이징)
Indicator(인디게이터)에 컨트롤 버튼을 추가하여 커스터마이징을 하겠습니다.
1. Indicator(인디게이터)를 <button> 태그에서 <ol>, <li> 태그로 변경합니다.
<div class="carousel-indicators">
<button type="button" data-bs-target="#mainTopCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#mainTopCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div><ol class="carousel-indicators">
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="1" aria-current="true" aria-label="Slide 1"></li>
</ol>
그리고 Indicator(인디게이터)의 모양을 둥글게 처리하기 의해 <style>에 css를 추가합니다.
.carousel-indicators > li {
height: 10px !important;
width: 10px !important;
border-radius: 50%;
margin-right: 10px !important;
}
2. Indicator(인디게이터)에 이전과 다음을 추가합니다.
<ol class="carousel-indicators">
<li class="carousel-control" @click="mainTopCarouselPrevClick"><i class="bi bi-chevron-left"></i></li>
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="1" aria-current="true" aria-label="Slide 1"></li>
<li class="carousel-control" @click="mainTopCarouselNextClick"><i class="bi bi-chevron-right"></i></li>
</ol>
그리고 컨트롤 기능을 수직 정렬시키기 위해 <style>에 css를 추가합니다.
.carousel-indicators > li.carousel-control {
line-height: 30px;
color: #fff;
cursor: pointer;
}
3. Indicator(인디게이터)에 플레이/중지를 추가합니다.
<ol class="carousel-indicators">
<li class="carousel-control" @click="mainTopCarouselPrevClick"><i class="bi bi-chevron-left"></i></li>
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="1" aria-current="true" aria-label="Slide 1"></li>
<li class="carousel-control" @click="mainTopCarouselPlayPauseClick($event)"><i class="bi bi-pause-fill"></i></li>
<li class="carousel-control" @click="mainTopCarouselNextClick"><i class="bi bi-chevron-right"></i></li>
</ol>클릭 이벤트에서 이벤트 정보를 받기 위해 $event 파라미터를 추가합니다.
그리고 <script>의 methods에 플레이/중지 클릭 이벤트를 추가합니다.
플레이/중지를 클릭하면 플레이와 중지 기능이 토글(toggle) 되도록 처리합니다.
플레이 상태에서 클릭하면 중지가 되고 Carousel(캐러셀)의 class에 .pause를 추가합니다. 그리고 아이콘을 pause(bi-pause-fill)에서 play(bi-play-fill)로 변경시킵니다.
중지 상태에서 클릭하면 플레이가 되고 Carousel(캐러셀)의 class에서 .pause를 삭제합니다. 그리고 아이콘을 play(bi-play-fill)에서 pause(bi-pause-fill)로 변경시킵니다.
mainTopCarouselPlayPauseClick(event) {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
if (mainTopCarousel.classList.contains("pause")) {
mainTopCarousel.classList.remove("pause");
event.target.classList.remove("bi-play-fill");
event.target.classList.add("bi-pause-fill");
carousel.cycle();
} else {
mainTopCarousel.classList.add("pause");
event.target.classList.remove("bi-pause-fill");
event.target.classList.add("bi-play-fill");
carousel.pause();
}
}
그리고 .home이 적용된 <div> 태그 안에 Carousel(캐러셀)의 컨트롤 버튼들을 삭제하고 <script>에서 mainTopCarouselPlayClick() 함수와 mainTopCarouselPauseClick() 함수를 삭제합니다.
전체 소스입니다.
<template>
<div id="mainTopCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
<ol class="carousel-indicators">
<li class="carousel-control" @click="mainTopCarouselPrevClick"><i class="bi bi-chevron-left"></i></li>
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
<li data-bs-target="#mainTopCarousel" data-bs-slide-to="1" aria-current="true" aria-label="Slide 1"></li>
<li class="carousel-control" @click="mainTopCarouselPlayPauseClick($event)"><i class="bi bi-pause-fill"></i></li>
<li class="carousel-control" @click="mainTopCarouselNextClick"><i class="bi bi-chevron-right"></i></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="main-top-promotion">
<video class="main-top-promotion-video" autoplay="autoplay" loop="loop" muted="muted">
<source src="../assets/AdobeStock_197561178_AdobeCreativeCloudExpress.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 text-md-start">
<div class="py-5">
<h1 class="text-white fw-bold">
Welcome to Your <br>Vue.JS Application
</h1>
<p class="text-white mb-4 fs-5">
당신의 이야기가 세상을 바꿉니다.
</p>
<router-link :to="{name:'BoardWrite'}" class="btn btn-success">나의 이야기 쓰기</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="main-top-promotion">
<video class="main-top-promotion-video" autoplay="autoplay" loop="loop" muted="muted">
<source src="../assets/AdobeStock_375502954_AdobeCreativeCloudExpress.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 text-md-start">
<div class="py-5">
<h1 class="text-white fw-bold">
반려동물과의 <br>희로애락(喜怒哀樂)
</h1>
<p class="text-white mb-4 fs-5">
나의 반려생활을 공유합니다.
</p>
<router-link :to="{name:'BoardList'}" class="btn btn-primary mx-2">반려생활 소식</router-link>
<router-link :to="{name:'BoardWrite'}" class="btn btn-success">나의 반려생활 쓰기</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#mainTopCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#mainTopCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import * as bootstrap from 'bootstrap';
export default {
name: 'Home',
components: {
HelloWorld
},
methods : {
mainTopCarouselPrevClick() {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
carousel.prev();
},
mainTopCarouselNextClick() {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
carousel.next();
},
mainTopCarouselPlayPauseClick(event) {
var mainTopCarousel = document.querySelector('#mainTopCarousel');
var carousel = bootstrap.Carousel.getInstance(mainTopCarousel);
if (mainTopCarousel.classList.contains("pause")) {
mainTopCarousel.classList.remove("pause");
event.target.classList.remove("bi-play-fill");
event.target.classList.add("bi-pause-fill");
carousel.cycle();
} else {
mainTopCarousel.classList.add("pause");
event.target.classList.remove("bi-pause-fill");
event.target.classList.add("bi-play-fill");
carousel.pause();
}
}
}
};
</script>
<style>
.main-top-promotion {
position: relative;
width: 100%;
}
.main-top-promotion-video {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
}
.main-top-promotion > .container {
position: relative;
}
.carousel-control-next, .carousel-control-prev {
width: 7% !important;
}
.main-top-crousel-startpause {
border: 0;
background-color: transparent;
color: white;
}
.carousel-indicators > li {
height: 10px !important;
width: 10px !important;
border-radius: 50%;
margin-right: 10px !important;
}
.carousel-indicators > li.carousel-control {
line-height: 30px;
color: #fff;
cursor: pointer;
}
</style>728x90
반응형