개발자.. 너란놈..

- Next에서는 Autoplay, Pagination, Navigation 기능을 활성화하기 위해 SwiperCore.use 사용

SwiperCore.use([Autoplay]);

<Swiper
    className={clsx(styles.swiper)}
    modules={[Autoplay]}
    autoplay={{ delay: 2000, disableOnInteraction: true }}
    loop={true}
    grabCursor={true}
    slidesPerView={1}
    spaceBetween={100}
    centeredSlides={true}
    breakpoints={{
        1200: {
            slidesPerView: 3,
            spaceBetween: 50,
        },
    }}
>

테스트 목록

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

해당 도메인 Swiper JS API를 다운 받을 수 있는 도메인 입니다.

https://swiperjs.com/

Swiper Js란

MIT에서 만든 FREE 라이센스 입니다.

거두절미 하고 결론적으로 말씀 드리면 최신버전은 ie를 지원하지 않으니

낮은 버전으로 swiper를 써서 진행하시길 바랍니다.

저는 4.5.1 버전에 Swiper를 이용하여 ie도 수직 swiper를 가능하게 사용 했습니다.

API중 최근에 있는 API는 ie를 지원하지 않는 버전도 꽤 있습니다.

저는 ie 11에서 수직으로 wheel이 되는 swiper를 만들었어야 됐는데 5.4.5버전으로 진행을 하려고 하니

IE에서 지원하지 않는 Math.sign 때문에 IE를 제외한 브라우저에서는 잘 됐었습니다.

그래서 낮은 버전으로 다시 시도를 해보니 잘 되는 것 확인 했습니다.