반응형

테스트 목록

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();
});




      

 

 

+ Recent posts