|
|
| (사용자 2명의 중간 판 234개는 보이지 않습니다) |
| 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>
| |