반응형
테스트 목록
1. 가로 슬라이드
2. 세로 슬라이드
3. 가로 슬라이드에 세로 슬라이드 추가
4. 세로 슬라이드에 가로 슬라이드 추가
<div style="margin-bottom:50px"><strong>1. 배경 + 세로 슬라이드</strong></div>
<!-- greeting_w -->
<div class="greeting_w part2" style="background-image:none;background:#000">
<div class="fix_inner" style="height: 290px;">
<!-- 테스트 -->
<div class="swiper-container" id="swiper-container-inbox">
<div class="swiper-wrapper">
<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 class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- //greeting_w -->
<div style="margin-bottom:50px"><strong>2. 세로 슬라이드</strong></div>
<!-- greeting_w -->
<div class="greeting_w part2" style="height: 290px;background-image:none;background:#000">
<div class="swiper-container" id="swiper-container-fullbox">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:red">Slide 1</div>
<div class="swiper-slide" style="background-color:indianred">Slide 2</div>
<div class="swiper-slide" style="background-color:blue">Slide 3</div>
<div class="swiper-slide" style="background-color:lightcoral">Slide 4</div>
<div class="swiper-slide" style="background-color:greenyellow">Slide 5</div>
<div class="swiper-slide" style="background-color:yellow">Slide 6</div>
<div class="swiper-slide" style="background-color:lightpink">Slide 7</div>
<div class="swiper-slide" style="background-color:lavenderblush">Slide 8</div>
<div class="swiper-slide" style="background-color:powderblue">Slide 9</div>
<div class="swiper-slide" style="background-color:orange">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--3. 가로 , 세로 슬라이드 -->
<div style="margin-bottom:50px"><strong>3. 가로 , 세로 슬라이드 </strong></div>
<div class="greeting_w part2" style="background-image:none;background:#000">
<div class="fix_inner" style="height: 290px;">
<div class="swiper-container swiper-container-h" id="swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide">horizontal Slide 1</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-v" id="swiper-container-vertical">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">Vertical Slide 2</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
<div class="swiper-slide">Vertical Slide 5</div>
</div>
<div class="swiper-pagination swiper-pagination-v"></div>
</div>
</div>
<div class="swiper-slide">horizontal Slide 3</div>
<div class="swiper-slide">horizontal Slide 4</div>
<div class="swiper-slide">horizontal Slide 5</div>
<div class="swiper-slide">horizontal Slide 6</div>
<div class="swiper-slide">horizontal Slide 7</div>
<div class="swiper-slide">horizontal Slide 8</div>
<div class="swiper-slide">horizontal Slide 9</div>
<div class="swiper-slide">horizontal Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-h"></div>
</div>
</div>
</div>
<!--4. 세로 , 가로 슬라이드 -->
<div style="margin-bottom:50px"><strong>4. 세로 , 가로 슬라이드 </strong></div>
<div class="greeting_w part2" style="background-image:none;background:#000">
<div class="fix_inner" style="height: 290px;">
<div class="swiper-container swiper-container-v" id="swiper-container-vertical2">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-h" id="swiper-container-horizontal21">
<div class="swiper-wrapper"><!--4. 세로 , 가로 슬라이드 -->
<div style="margin-bottom:50px"><strong>4. 세로 , 가로 슬라이드 </strong></div>
<div class="greeting_w part2" style="background-image:none;background:#000">
<div class="fix_inner" style="height: 290px;">
<div class="swiper-container swiper-container-v" id="swiper-container-vertical2">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-h" id="swiper-container-horizontal21">
<div class="swiper-wrapper">
<div class="swiper-slide" style="">horizontal Slide 1</div>
<div class="swiper-slide" style="">horizontal Slide 2</div>
<div class="swiper-slide" style="">horizontal Slide 3</div>
<div class="swiper-slide" style="">horizontal Slide 4</div>
<div class="swiper-slide" style="">horizontal Slide 5</div>
</div>
<div class="swiper-pagination swiper-pagination-h"></div>
</div>
</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
<div class="swiper-slide">Vertical Slide 5</div>
<div class="swiper-slide">Vertical Slide 6</div>
<div class="swiper-slide">Vertical Slide 7</div>
<div class="swiper-slide">Vertical Slide 8</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-h" id="swiper-container-horizontal22">
<div class="swiper-wrapper">
<div class="swiper-slide">horizontal Slide 1</div>
<div class="swiper-slide">horizontal Slide 2</div>
<div class="swiper-slide">horizontal Slide 3</div>
<div class="swiper-slide">horizontal Slide 4</div>
<div class="swiper-slide">horizontal Slide 5</div>
</div>
<div class="swiper-button-prev"></div><!-- 이전 버튼 -->
<div class="swiper-button-next"></div><!-- 다음 버튼 (오른쪽에 있는 버튼) -->
<div class="swiper-pagination swiper-pagination-h"></div>
</div>
</div>
<div class="swiper-slide">Vertical Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-v"></div>
</div>
</div>
</div>
<button id="swipe_prev_test">왼쪽</button>
<button id="swipe_next_test">오른쪽</button>
</div>
<script src="~/Scripts/API/swiper.min .js"></script>Script
/* 1. 배경 + 세로 슬라이드 */
var swiper_inbox = new Swiper('#swiper-container-inbox', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
/* 2. 세로 슬라이드 */
var swiper_fullbox = new Swiper('#swiper-container-fullbox', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
/* 3. 가로 , 세로 슬라이드 */
var swiper_horizontal = new Swiper('#swiper-container-horizontal', {
direction: 'horizontal',
slidesPerView: 1,
spaceBetween: 30,
//mousewheel: true,
pagination: {
el: '.swiper-pagination-h',
clickable: true,
},
});
var swiper_vertical = new Swiper('#swiper-container-vertical', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
});
/* 4. 세로 , 가로 슬라이드 */
var swiper_vertical2 = new Swiper('#swiper-container-vertical2', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
});
var swiper_horizontal21 = new Swiper('#swiper-container-horizontal21', {
direction: 'horizontal',
slidesPerView: 1,
spaceBetween: 30,
//mousewheel: true,
pagination: {
el: '.swiper-pagination-h',
clickable: true,
},
});
var swiper_horizontal22 = new Swiper('#swiper-container-horizontal22', {
direction: 'horizontal',
slidesPerView: 1,
spaceBetween: 30,
loop : true ,
//mousewheel: true,
pagination: {
el: '.swiper-pagination-h',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
/* 왼쪽 버튼 테스트 */
$(document).on("click", "#swipe_prev_test", function () {
$(".swiper-button-prev").click();
});
/* 오른쪽 버튼 테스트 */
$(document).on("click", "#swipe_next_test", function () {
$(".swiper-button-next").click();
});
'IT > JS + Jquery' 카테고리의 다른 글
| [Javascript]현재 날짜 구하기 (YYYYMMDD,YYYY-MM-DD,YYYY.MM.DD) (0) | 2020.09.10 |
|---|---|
| [Javascript]C3 Cannot read property 'category10' of undefined (0) | 2020.06.25 |
| [Javascript]ie에서 wheel로 수직(vertical) Swiper (0) | 2020.06.23 |
| [Javascript]카카오 맵 소스 데이터 가져오기 (0) | 2020.06.17 |
| [JavaScript]현재 기준 당일 , 1주전, 2주전 , 3주전 날짜 만들기 (0) | 2020.03.20 |