JQuery / Plug-in

*제이쿼리 plug in - 만들어진 소스를 활용하는 방식 

*연결 순서 
1. 라이브러리
2. 슬라이드 배너 플러그인 
3. common.js (2차메뉴 + 슬라이드 동작 시킬 간단한 구문=method)

 

 ex)
<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" href="css/slick.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script src="js/jquery-3.6.0.min.js"></script>-라이브러리
<script src="js/slick.min.js"></script>-플러그인
<script src="js/common.js"></script>

method ex)  
<script>
$('.main_slide').slick();      - 기본
</script>

<script>
$('.main_slide').slick({
autoplay: true;    -옵션 추가
});
</script>

*기본 사용방법 
1. 플러그인 사이트 활용 ex)slick, slider 검색하면 나옴 
2. 플러그인 소스 파일 다운로드 (slick.min.js / slick.css)
3. js에 demo에 있는 제이쿼리 구문 복사해서 선택자명 바꿔서 기입

★ 기본 이미지 슬라이드

 

ul class를 mb라고 줬다고하면 

$('.mb').slick();

 

이때 ul을 준 부모요소 section id에 높이값이 있어야 한다 

*자동으로 넘어가게 하는법 - autoplay : true

*방향(arrow)버튼은 next/prev 라고 부르고 
슬라이드 갯수 보여주는건 dots , pager , swiper 라고 부름 - 보통 페이져라고하고 slick에서는 닷츠라고함

이런 옵션은 원래 false라 안보인다 - dots: true 하면 나타남  

*가로가 아니고 세로 롤링형태로 슬라이드하려면 vertical: true 

*function을 중복작성할때는 , 콤마를 찍어줘야함

 

*플러그인 클래스명은 검사를 돌려보면 확인 가능하다 

*dots는 ul로 ul에 위치값을 주고 수평으로 배치하려면 inline-block or float 그리고 스타일은 button에 준다     

*.slick active -  addclass removeclass 들어가서 사라졌다 나타났다 함 = dots에서 현재 어떤 슬라이드를 보여주는지 

 

*li.slick-active 붙여쓰는건 slick-active 가 li를 지칭하는것 즉 li클래스명이 slick-active라는거
 
★ 배경 슬라이드 + 페이드 모드

*배너 위에 백그라운드이미지나 텍스트 올릴때 nth:child 쓰지않고 li마다 클래스

*기본 이미지 슬라이드의 이미지는 img태그로 이미지 자체 크기로 잡히는데 
배경슬라이드는 백그라운드로 사진이미지를 넣으면 높이값이 글자만큼만 잡혀서 
높이값 설정해줘야함 

*페이드모드 (서서히 나타났다가 서서히 사라짐) fade: true 

*버튼 클래스가 동일한데 스타일 변경하는법: 섹션 id 넣고 클래스명 넣으면 해당 섹션에만 적용 

★ 여러장 슬라이드

 

*기본으로 slidetoshow는 1이고 5개를 보이게 하고 스크롤시 3개씩 나오게 하겠다 하면

구문에 옵션으로 slidetoshow를 5 주고 slidetoscroll을 3을 주면 된다 

※주의사항은 slidetoshow를 5개 했으면 li가 6개 이상이여야 slidetoscroll이 작동을 한다 

★ 공지사항 슬라이드 


div 안의 ul로 작성하는데 
공지사항 / 쇼핑테마 이렇게 타이틀은 탭메뉴로 이동하고 클릭시 해당 내용이 나오는데 
타이틀은 li안에 h3로 작성
그리고 해당 내용은 ul 중첩작성 각각 li로 작성 후 날짜 오른쪽 정렬은 span으로 float right 
그리고 ul을 닫는게 아니라! li 추가작성 후 h3 후 반복 
총 li 2개에 각각의 중첩태그로 작성한 것 

이걸 css에서 ul중첩태그 안의 li에 스타일 넣고 안보이게 display none을 먼저 처리 - 
이거 li두개 다 absolute로 겹쳐서 위치함 제이쿼리로 click 하면 addclass 하는데 그 class 내용이 display block 인거

타이틀 li > h3 도 click시 스타일주려면 addclass줄 스타일 넣으면 됨 
ex) #info .news .board ul li.active h3{border: 1px solid #ddd; color: #000;}

그리고 탭하는 효과는 제이쿼리에 구문작성하는데 
 $('.tab > li:first-child').addClass('active'); 
    $('.tab > li > h3').click(function(){
        $(this).parent().addClass('active').siblings().removeClass('active');
    });

1. 이 .tab은 ul에 클래스를 준거 / li:first-child는 h3 타이틀 말함 
2. 여기에 css에 가상으로 만들어놓은 .active라는걸 addclass해줘서 실행이 되게 만들고 - 이때 css작업때 
안보이니까 html에 임시로 .active 해서 보이게했다가 지우고 제이쿼리에 기입해도 됨 
3. 타이틀을 클릭했을때 클릭한 요소의 부모요소에 active클래스를 주고 형제요소에는 active지워라 
이렇게하면 공지사항 누르면 쇼핑테마안의 li들은 display none이 되고 h3도 active스타일이 remove된다 



타이틀 li > h3 도 click시 스타일주려면 addclass줄 스타일 넣으면 됨 
ex) #info .news .board ul li.active h3{border: 1px solid #ddd; color: #000;}

그리고 탭하는 효과는 제이쿼리에 구문작성하는데 
 $('.tab > li:first-child').addClass('active'); 
    $('.tab > li > h3').click(function(){
        $(this).parent().addClass('active').siblings().removeClass('active');
    });

1. 이 .tab은 ul에 클래스를 준거 / li:first-child는 h3 타이틀 말함 
2. 여기에 css에 가상으로 만들어놓은 .active라는걸 addclass해줘서 실행이 되게 만들고 - 이때 css작업때 
안보이니까 html에 임시로 .active 해서 보이게했다가 지우고 제이쿼리에 기입해도 됨 
3. 타이틀을 클릭했을때 클릭한 요소의 부모요소에 active클래스를 주고 형제요소에는 active지워라 
이렇게하면 공지사항 누르면 쇼핑테마안의 li들은 display none이 되고 h3도 active스타일이 remove된다