html
<div class="slider_wrap">
<div class="swiper_control">
<button class="btn_prev">이전</button>
<button class="btn_next">다음</button>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div>
<b>1슬라이드 타이틀 텍스트</b>
<p>슬라이드 서브 텍스트</p>
<a href="#">버튼</a>
</div>
</div>
<div class="swiper-slide slide2">
<div>
<b>2슬라이드 타이틀 텍스트</b>
<p>슬라이드 서브 텍스트</p>
<a href="#">버튼</a>
</div>
</div>
<div class="swiper-slide slide3">
<div>
<b>3슬라이드 타이틀 텍스트</b>
<p>슬라이드 서브 텍스트</p>
<a href="#">버튼</a>
</div>
</div>
</div>
</div>
</div>
css
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
.slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;}
.swiper-container{ overflow:hidden; height:300px;}
.swiper-slide{width:600px; height:300px; box-sizing:border-box; padding: 0 50px; display: flex !important; align-items: center;}
.swiper-slide.slide1 {background: rgb(239,146,128);}
.swiper-slide.slide2 {background: rgb(90,207,172);}
.swiper-slide.slide3 {background: rgb(113,179,232);}
.swiper_control button{display: block; width: 38px; height: 38px; border: 0; font-size: 0; position: absolute; z-index: 99; top: 50%; margin-top: -19px; cursor: pointer;}
.swiper_control .btn_prev{background: url(https://umings.github.io/images/btn_slide_prev.png) no-repeat center; left: -19px;}
.swiper_control .btn_next{background: url(https://umings.github.io/images/btn_slide_next.png) no-repeat center; right: -19px;}
.swiper-slide b, .swiper-slide p, .swiper-slide a{position:relative; bottom:-10px; transition: all 0.5s; opacity:0; font-family: 'pretendard';}
.swiper-slide b{font-size:23px;}
.swiper-slide p{font-size:15px;}
.swiper-slide a{display:inline-block; width:70px; height:30px; border:1px solid #000; text-align:center; line-height:30px; text-decoration:none; color:#000; background:#fff; font-size:14px;}
.swiper-slide-active b, .swiper-slide-duplicate-active b, .swiper-slide-active p, .swiper-slide-duplicate-active p, .swiper-slide-active a, .swiper-slide-duplicate-active a {opacity: 1; bottom: 0px; transition-delay: 0.2s;}
.swiper-slide-active p, .swiper-slide-duplicate-active p {transition-delay: 0.4s;}
.swiper-slide-active a, .swiper-slide-duplicate-active a {transition-delay: 0.6s;}
js
var Slier = new Swiper('.swiper-container', {
effect : 'fade',
navigation: {
nextEl: '.btn_next',
prevEl: '.btn_prev',
},
autoplay: {
delay: 3000,
disableOnInteraction: false
},
loop: true,
observer: true,
observeParents: true,
speed: 500
});
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
head fixed table with custom scrollbar (0) | 2023.05.18 |
---|---|
fixed header + gnb (header에 hover시 gnb 열리면서 on효과, 스크롤시 on효과) (0) | 2023.05.17 |
slick slider progress bar and page fraction example (0) | 2023.05.16 |
카카오맵 이미지 마커 + 커스텀 오버레이 (마커 클릭시 해당장소로 이동) (0) | 2023.05.16 |
background circle animation loading (0) | 2023.05.15 |