개발자.. 너란놈..

해결책

사용중인 C3의 버전을 다운그레이드 하거나 아래의 소스를 C3.js를 하기전에 넣어주면 됩니다.

<script src="https://d3js.org/d3.v5.min.js"></script>

테스트 목록

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를 제외한 브라우저에서는 잘 됐었습니다.

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

-주소를 검색한다.

-A를 클릭하여 상세 보기를 클릭한다.

-상위의 지도를 찍어서 소스를 가져올 수 있게 창을 띄운다.

-설정에 맞는 옵션을 클릭하여 소스를 생성한다.

조금 더 간편한 소스 생성이 있어서 아래와 같이 하면 될 것 같다.

-주소 검색을 하고 가져오기 버튼이 있으면 그것을 클릭한다.

-소스 생성하기로 데이터를 가지고 온다.

끄읕 

if (Request.QueryString["GET파라미터"]!=null)
{
	strIndex = Request.QueryString["GET파라미터"].ToString();
}

레이저에서도 사용 가능.

string _SendUrl = "";
string _GetUrl = "";
bool _isMssiExit = true;
bool _isImoExit = true;

Thread thread = new Thread(new ThreadStart(GetWebPageWorker));
Thread thread2 = new Thread(new ThreadStart(GetWebPageWorker));

_SendUrl = ""; //초기화
_GetUrl = "";  //초기화

_SendUrl = "URL링크"
thread.SetApartmentState(ApartmentState.STA);
thread.Start();
thread.Join();

//Wating Thread
while(_isMssiExit)
{
	if (_GetUrl.IndexOf("shipid:") > -1)
	{
		_isMssiExit = false;
		thread.Abort();
	}
	else if (_GetUrl == _SendUrl)
	{
		thread.Abort();

		_SendUrl = "URL링크"
		thread2.SetApartmentState(ApartmentState.STA);
		thread2.Start();
		thread2.Join();

		while (_isImoExit)
		{
			if(_GetUrl.IndexOf("shipid:") > -1)
			{
				_isMssiExit = false;
				_isImoExit = false;
				thread2.Abort();
			}
			else if (_GetUrl == _SendUrl)
			{
				throw new ArgumentNullException("오류");
			}
		}
	}
}

//URL 가져오는 함수
protected void GetWebPageWorker()
{
	using (WebBrowser browser = new WebBrowser())
	{
		//  browser.ClientSize = new Size(_width, _height);
		browser.ScrollBarsEnabled = false;
		browser.ScriptErrorsSuppressed = true;
		browser.Navigate(_SendUrl);

		// Wait for control to load page
		while (browser.ReadyState != WebBrowserReadyState.Complete)
		Application.DoEvents();

		_GetUrl = browser.Url.AbsoluteUri; //Redirct 한 URL
	}
}

function 날짜(vDate)
{
	var vPrevDate;
	var vNowDate = new Date().getFullYear()+"-"+_pad(new Date().getMonth() + 1, 2)+"-"+_pad(new Date().getDate(), 2);
	var vResult;

	var d = new Date();
	var dayOfMonth = d.getDate();

	if(vDate == "now")
	{
		vPrevDate = vNowDate;
	}
	else if(vDate == "1week")
	{
		d.setDate(dayOfMonth - 7);
		vPrevDate = d.getFullYear()+"-"+_pad(d.getMonth() + 1,2)+"-"+_pad(d.getDate(),2);
	}
	else if(vDate == "2week")
	{
		d.setDate(dayOfMonth - 14);
		vPrevDate = d.getFullYear()+"-"+_pad(d.getMonth() + 1,2)+"-"+_pad(d.getDate(),2);
	}
	else if(vDate == "3week")
	{
		d.setDate(dayOfMonth - 21);
		vPrevDate = d.getFullYear()+"-"+_pad(d.getMonth() + 1,2)+"-"+_pad(d.getDate(),2);
	}
}

_pad 함수

//숫자 width만큼 앞에 0 붙혀주는 함수 EX) widht = 2일떄 1은 01로 찍힘
function _pad(n, width) {
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}​

//Youtube Rss Atom형식의 XML을 파싱하는 소스
using(XmlTextReader rssReader = new XmlTextReader("Youtube URl")) 
{ 
	XmlDocument xmlDoc = new XmlDocument(); //XML 객체 생성      
	xmlDoc.Load(rssReader); //URL Load

	//Select all nodes starting with "entry"
	XmlNodeList xmlNodeList = xmlDoc.GetElementsByTagName("entry"); //XML에 entry태그의 데이터를 전부 가지고 와서 List로 만들어준다.

	//각각의 노드로 만들어서 반복문을 돌린다.
	foreach(XmlNode node in xmlNodeList) 
	{ 	
		XmlDocument innerXmlDocument = new XmlDocument(); //내부 객체를 파싱하기 위한 XmlDocument를 생성한다.
		innerXmlDocument.LoadXml(node.OuterXml); //entry 노드의 데이터를 파싱한다.

		//innerXmlDocument.GetElementsByTagName("media:title")[0].InnerText => XML 태그의 텍스트를 전부 가지고 온다.
		//innerXmlDocument.GetElementsByTagName("media:thumbnail")[0].Attributes["url"].Value 태그 안에 있는 속성의 값만 가지고 온다.

		string vYoutube_URL = innerXmlDocument.GetElementsByTagName("link")[0].Attributes["href"].Value;
		string vThumbnail_URL innerXmlDocument.GetElementsByTagName("media:thumbnail")[0].Attributes["url"].Value;
		string vTitle = innerXmlDocument.GetElementsByTagName("media:title")[0].InnerText;
		string vDescription = innerXmlDocument.GetElementsByTagName("media:description")[0].InnerText;
	}
}