코스모스팜 스레드

슬라이드 제이쿼리

jQuery(document).ready(function(){
			//팝업을 감싸고 있는 오브젝트의 이름, 이 오브젝트의 넓이가 팝업의 넓이가 됨.
			var obj_wrap=jQuery(".slide");
			//움직일 오브젝트의 이름
			var obj_name = jQuery(".slide>ul");
			//보여질 실제 팝업을 감싸고 있는 영역
			var obj_child = jQuery(".slide>ul>li");
			
			//팝업 드래그 이동, 사용여부 (true, false)
			var mouse_draging = true;//컴퓨터 마우스 드래그 인식
			var touch_draging = true;//스마트폰 터치 인식

			//팝업 컨트롤버튼
			var ctrl_btn = true;//사용여부 (true, false)
			var ctrl_next = jQuery(".row3 .next");
			var ctrl_prev = jQuery(".row3 .prev");
			var ctrl_stop = jQuery(".row3 .stop");
			var ctrl_play = jQuery(".row3 .play");

			//현재팝업 번호 / 전체 팝업번호
			var numbering = false;//사용여부 (true, false)
			var curr_num = jQuery(".slide .curr_num");
			var total_num = jQuery(".slide .total_num");

			//팝업 리스트
			var paging = true;//사용여부 (true, false)
			var paging_obj = jQuery(".slide .paging div");
			var paging_curr_class = "active";//현재 선택된 팝업을 표시할 class명
			var paging_index;//클릭한 오브젝트

			//자동플레이 여부(true, false)
			var auto_play = true;
			var auto_time = 5000;
			var auto_status;

			//이 아래 변수는 수정 금지
			var obj_position_reset;
			var refreshInvervalId;
			var obj_drag = false;
			var obj_index = 1;
			//팝업의 갯수 계산
			var obj_length = obj_child.length;
			if(obj_length <= 1){mouse_draging = false; touch_draging = false;}
			//팝업의 넓이 계산
			var obj_width = obj_wrap.width();
			obj_child.width(obj_width);
			var startX = null;
			var prevX = null;
			var currX = null;
			var moveX = null;
			var afterX = null;
			var e = null;
			default_set();

			if(touch_draging == true){
				//모바일에서 터치를 인식
				obj_name.on("touchstart", function(a){
					obj_drag = true;
					e = a.originalEvent;
					currX = e.touches[0].pageX
					startX = e.touches[0].pageX;
					obj_name.on("touchmove", function(b){
						if(obj_drag ==  true){
							e = b.originalEvent;
							prevX = currX;
							currX = e.touches[0].pageX;
							moveX = prevX - currX;
							drag_move(moveX);
						}
					});
				});
				jQuery(document).on("touchend", function(){
					if((obj_drag == true) && (Math.abs(startX) != (Math.abs(currX)))){
						drag_end();
					}
					obj_drag = false;
					obj_name.off("touchmove");
				});
			}

			if(mouse_draging == true){
				//마우스 드래그를 인식
				obj_name.on("mousedown", function(a){
					obj_drag = true;
					currX = a.pageX;
					startX = a.pageX;
					obj_name.on("mousemove", function(b){
						if(obj_drag ==  true){
							prevX = currX;
							currX = b.pageX;
							moveX = prevX - currX;
							drag_move(moveX);
						}
					});
				});
				jQuery(document).on("mouseup", function(){
					if((obj_drag == true) && (Math.abs(startX) != (Math.abs(currX)))){
						drag_end();
					}
					obj_drag = false;
					obj_name.off("mousemove");
				});
			}

			//drag 혹은 touch 시 오브젝트를 움직이는 함수
			function drag_move(moveX){
				jQuery(obj_name).offset({
					left : jQuery(obj_name).offset().left - moveX
				});
				obj_index = parseInt(-(jQuery(obj_name).position().left) / obj_width);
				index_change(obj_index);
			}

			///drag 혹은 touch가 종료되었을때 실행하는 함수
			function drag_end(){
				if(jQuery(obj_name).position().left > 0){
					afterX = 0;
				}else if(jQuery(obj_name).position().left < -((obj_length+1) * obj_width)){
					afterX = (obj_length) * obj_width;
				}else{
					if(moveX > 0){
						afterX = (obj_index+1) * obj_width;
					}else{
						afterX = (obj_index) * obj_width;
					}
				}
				jQuery(obj_name).animate({
					left : -afterX
				}, 500, function(){
					obj_index = parseInt(-(jQuery(obj_name).position().left) / obj_width);
					if(obj_index <= 0){
						obj_index = obj_length;
						jQuery(obj_name).css("left", -(obj_length*obj_width));
					}else if(obj_index > obj_length){
						obj_index = 1;
						jQuery(obj_name).css("left", -obj_width);
					}
					index_change(obj_index);
					time_reset();
				});
			}

			//animate로 오브젝트를 움직이는 함수
			function animate_move(go_index){
				if(go_index < 1){
					obj_index = obj_length;
					obj_position_reset = -(obj_width*obj_length);
				}else if(go_index > obj_length){
					obj_index = 1;
					obj_position_reset = -obj_width;
				}else{
					obj_position_reset = "";
					obj_index = go_index;
				}
				
				jQuery(obj_name).animate({
					left : -((go_index) * obj_width)
				}, 500, function(){
					if(obj_position_reset != ""){
						jQuery(obj_name).css("left", obj_position_reset);
					}
				});
				index_change(obj_index);
			}

			//auto play로 다음 팝업으로 이동하는 함수
			function auto_next(){
				obj_index++;
				animate_move(obj_index);
			}

			//index 변경 시 변경해야 할 것들 (paging, numbering)
			function index_change(index){
				if(numbering == true){
					curr_num.html(index);
				}
				if(paging == true){
					paging_obj.removeClass(paging_curr_class);
					paging_obj.eq(index-1).addClass(paging_curr_class);
				}
			}

			function time_reset(){
				if(auto_status == "play"){
					clearInterval(refreshInvervalId);
					refreshInvervalId = setInterval(auto_next, auto_time);
				}
			}

			function default_set(){
				if(obj_length > 1){
					obj_child.eq(0).clone().appendTo(obj_name);
					obj_child.eq(obj_length-1).clone().prependTo(obj_name);
					obj_name.css("left", -obj_width);
					obj_name.width((obj_length+2)*obj_width);
				}
				index_change(obj_index);
			}
			
			if(ctrl_btn == true){
				ctrl_prev.on("click", function(){
					obj_index--;
					animate_move(obj_index);
					time_reset();
				});
				ctrl_next.on("click", function(){
					auto_next();
					time_reset();
				});
				ctrl_stop.on("click", function(){
					clearInterval(refreshInvervalId);
					auto_status = "stop";
				});
				ctrl_play.on("click", function(){
					refreshInvervalId = setInterval(auto_next, auto_time);
					auto_status = "play";
				});
			}

			//자동실행을 설정하였을 경우
			if(auto_play == true){
				//팝업의 수가 1개이하면 실행하지 않음
				if(obj_length > 1){
					refreshInvervalId = setInterval(auto_next, auto_time);
					auto_status = "play";
				}
			}

			//페이지번호를 사용할 경우
			if(numbering == true){
				curr_num.html(obj_index);
				total_num.html(obj_length);
			}

			//paging을 사용할 경우
			if(paging == true){
				paging_obj.removeClass(paging_curr_class);
				paging_obj.eq(obj_index-1).addClass(paging_curr_class);
				
				paging_obj.on("click", function(){
					//클릭한 paging의 번호 (1번째 paging은 값이 0)
					paging_index = jQuery(this).index();
					//console.log(paging_index);
					//해당 번호 팝업으로 이동..
					animate_move(paging_index+1);
					time_reset();
				});
			}

			//윈도우가 리사이즈되면 팝업 사이즈 다시 계산
			jQuery(window).resize(function(){
				obj_width = obj_wrap.width();
				obj_child.parent().children().width(obj_width);
				jQuery(obj_name).css("left", -((obj_index) * obj_width));
				obj_wrap.height(obj_child.height());
				obj_name.width((obj_length+2)*obj_width);
			});
			
			jQuery(window).load(function(){
				obj_wrap.height(obj_child.height());
			});
		});

일반 빈페이지에서는 잘 되는데... 왜 워드프레스로 가지고 오기만 하면 어긋나고 에러나고 잘안되는걸까요...

여기서 잘 못된 부분이있을까요?

이 페이지의 내용이 유익하시나요? 혹은 더 많은 답변을 받길 원하시면 이 페이지를 공유 해보시는건 어떨까요?

내 홈페이지에 소셜 공유 버튼 추가하기

코스모스팜 회원관리
코스모스팜 회원관리
  • 안녕하세요~^^

    어느 부분이 어긋나고 에러 메시지는 무엇인지요?

    올려주신 코드만으로는 어떤 원인인지 파악할 수 없습니다.

    저희도 테스트해볼 수 있는 HTML 코드도 올려주시겠어요?

    실제 확인 가능한 페이지 주소도 알려주시겠어요?

    고맙습니다.

코스모스팜 회원관리