패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 슬라이드 요소를 가운데에 배치하고 활성화된 요소만 불투명하게 보이도록 하는 방법에 대해 배웠다!
<div class="promotion">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/promotion_slide1.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!">
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide2.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!">
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide3.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!">
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide4.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!">
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide5.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!">
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
</div>
</div>
new Swiper('.promotion .swiper-container', {
slidesPerView: 3,
spaceBetween: 10,
centeredSlides: true,
loop: true,
autoplay: {
delay: 5000
}
});
.notice .promotion {
height: 693px;
background-color: #f6f5ef;
position: relative;
}
.notice .promotion .swiper-container {
width: calc(819px * 3 + 20px);
height: 553px;
position: absolute;
top: 40px;
left: 50%;
margin-left: calc((819px * 3 + 20px)/-1/2);
}
.notice .promotion .swiper-slide {
opacity: .3;
transition: opacity 1s;
position: relative;
}
.notice .promotion .swiper-slide-active {
opacity: 1;
}
.notice .promotion .swiper-slide .btn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}