▼ 25대 민원선 태그: 비우기 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
<html> | |||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> | |||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> | |||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> | |||
<!-- swiper슬라이더 메인컨테이너 --> | |||
<div class="swiper-container"> | |||
<!-- 보여지는 영역 --> | |||
<div class="swiper-wrapper"> | |||
<!-- div class="swiper-slide" 를 추가하면된다 --> | |||
<div class="swiper-slide">Slide 1</div> | |||
<div class="swiper-slide">Slide 2</div> | |||
<div class="swiper-slide">Slide 3</div> | |||
<div class="swiper-slide">Slide 4</div> | |||
<div class="swiper-slide">Slide 5</div> | |||
<div class="swiper-slide">Slide 6</div> | |||
</div> | |||
<!-- 페이징 버튼 처리 --> | |||
<div class="swiper-pagination"></div> | |||
<!-- 방향 버튼 상황에 따라 추가 삭제가능 --> | |||
<div class="swiper-button-prev"></div> | |||
<div class="swiper-button-next"></div> | |||
</div> | |||
<style> | |||
//초기설정 | |||
html, body { | |||
position: relative; | |||
height: 100vh; | |||
} | |||
//초기 설정 | |||
body { | |||
background: #eee; | |||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |||
font-size: 14px; | |||
color:#000; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
//.swiper-container 설정 | |||
.swiper-container { | |||
width: 100%; | |||
height: 100vh; | |||
} | |||
//.swiper-slide 설정 | |||
.swiper-slide { | |||
text-align: center; | |||
font-size: 18px; | |||
background: #fff; | |||
/* Center slide text vertically */ | |||
display: -webkit-box; | |||
display: -ms-flexbox; | |||
display: -webkit-flex; | |||
display: flex; | |||
-webkit-box-pack: center; | |||
-ms-flex-pack: center; | |||
-webkit-justify-content: center; | |||
justify-content: center; | |||
-webkit-box-align: center; | |||
-ms-flex-align: center; | |||
-webkit-align-items: center; | |||
align-items: center; | |||
} | |||
//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음 | |||
.swiper-container-vertical>.swiper-pagination-bullets{ | |||
top: unset !important; | |||
bottom: 10px; | |||
left: 0; | |||
width: 100%; | |||
} | |||
//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음 | |||
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{ | |||
display : inline-block !important; | |||
margin: 6px 2px !important; | |||
} | |||
</style> | |||
<script> | |||
const swiper = new Swiper('.swiper-container', { | |||
//기본 셋팅 | |||
//방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평 | |||
direction: 'horizontal', | |||
//한번에 보여지는 페이지 숫자 | |||
slidesPerView: 3, | |||
//페이지와 페이지 사이의 간격 | |||
spaceBetween: 30, | |||
//드레그 기능 true 사용가능 false 사용불가 | |||
debugger: true, | |||
//마우스 휠기능 true 사용가능 false 사용불가 | |||
mousewheel: true, | |||
//반복 기능 true 사용가능 false 사용불가 | |||
loop: true, | |||
//선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt | |||
centeredSlides: true, | |||
// 페이지 전환효과 slidesPerView효과와 같이 사용 불가 | |||
// effect: 'fade', | |||
//자동 스크를링 | |||
autoplay: { | |||
//시간 1000 이 1초 | |||
delay: 2500, | |||
disableOnInteraction: false, | |||
}, | |||
//페이징 | |||
pagination: { | |||
//페이지 기능 | |||
el: '.swiper-pagination', | |||
//클릭 가능여부 | |||
clickable: true, | |||
}, | |||
//방향표 | |||
navigation: { | |||
//다음페이지 설정 | |||
nextEl: '.swiper-button-next', | |||
//이전페이지 설정 | |||
prevEl: '.swiper-button-prev', | |||
}, | |||
}); | |||
</script> | |||
</html> | |||
2023년 2월 25일 (토) 20:29 판