JQuery ( JQueryPlugin, FlexSliderPlugin, js css file 연결, flexslider method, scroll progress bar )
JQuery Plugin 제이쿼리 플러그인
이미지 슬라이더, 데이트피커, 네비게이션 메뉴, 비이도 플레이어, 이미지 갤러리, 파일 업로드, 데이터 테이블 등,
위젯을 제이쿼리로 미리 구현해 놓은 제이쿼리 라이브러리.
별도의 프로그램을 생성하지 않고 불러다 사용 가능
google, naver 등 "image slider jquery plugin" or "datepicker jquery plugin" 같은 키워드 검색
소개 사이트
Flex Slider Plugin
쇼핑몰 플러그인 사이트(Woocommerce)에서 제공하는 이미지 슬라이더.
https://woocommerce.com/flexslider/
HTML, JS file 과 CSS file 연결 (Flex Slider Plugin)
<script src="c:/FlexSlider/js/jquery.flexslider.js"></script>
<link rel = "stylesheet" href = "C:/css/flexslider.css" type ="text/css"><head>안에 넣어주고,
$("선택자").flexslider({
//옵션_설정
});함수 입력
예시)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="C:/FlexSlider/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="C:/FlexSlider/css/flexslider.css" type="text/css">
<script>
$(function(){
$(".flexslider").flexslider();
});
</script>
</head>
<body>
<div class="flexslider"> <!-- 디브 요소에 flexslider 클래스 적용-->
<ul class="slides"> <!-- 슬라이더에서 사용될 이미지를 담은<ul> 요소에 sldies를-->
<li><img src="slide1.jpg"></li>
<li><img src="slide2.jpg"></li>
<li><img src="slide3.jpg"></li>
<li><img src="slide4.jpg"></li>
<li><img src="slide5.jpg"></li>
</ul>
</div>
</body>
</html>
Method of FlexSlider
animation 애니메이션 형태를 설정하는데, "slide"는 일반적인 이미지 슬라이드이고, "fade"는 페이드 인/아웃
이미지 슬라이드로 동작
animationLoop 마지막과 첫 번째가 연결되어 애니메이션이 실행되는 루프 기능을 설정하는데,
'true' 에니메이션 루프 작동, 'false' 에니메이션 루프 미작동
itemWidth 컨베이어 벨트 형태 (Carousel)에 이미지 슬라이드의 너비 설정
itemMargin 컨베이어 벨트 형태의 이미지 슬라이드 사이의 마진 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="C:/FlexSlider/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="C:/FlexSlider/css/flexslider.css" type="text/css">
<script>
$(function(){
$(".flexslider").flexslider({animation:"slide",animationLoop:true,itemWidth:200,itemMargin:5,slideshowSpeed:1000});//slideshowSpeed 슬라이드쇼 속도
}); //*animationSpeed 애니메이션 속도
</script>
</head>
<body>
<div class="flexslider carousel"> <!--carousel컨베이어 벨트처럼 실행-->
<ul class="slides">
<li><img src="slide1.jpg"></li>
<li><img src="slide2.jpg"></li>
<li><img src="slide3.jpg"></li>
<li><img src="slide4.jpg"></li>
<li><img src="slide5.jpg"></li>
<li><img src="slide6.jpg"></li>
</ul>
</div>
</body>
</html>
Scroll Progress Bar Plugin 스크롤 프로그레스 바 플로그인
웹 브라우징 중 브라우저 주소 창 바로 아래 스크롤바로 진행 상태를 알려주는 바
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>//앞에 써야함
<script src="C:Scroll-Progrees/js/jquery-scrollbar.js"></script>
$("선택자").onscroll({
//옵션_설정
});
backgroundColor 스크롤 프로그레스 바의 배경색 설정
height 스크롤 프로그레스 바의 높이 설정
position 스크롤 프로그레스 바의 속성 설정. 속성 값 'fixed'는 프로그레스 바의 현재 위치로 고정
https://www.jqueryscript.net/other/jQuery-Plugin-For-Page-Scroll-Progress-Bar.html#google_vignette
-> 로 가서 다운
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="C:Scroll-Progrees/js/jquery-scrollbar.js"></script>
<style>
*{margin: 0; padding: 0;}
#container{padding:20px}
#container p {padding: 10px;}
</style>
<script>
$(function(){
$("#Scroll-Progrees").onscroll({backgroundColor:"purple",height:"3px",position:"fixed"});
});
</script>
</head>
<body>
<div id="Scroll-Progrees"></div>
<div id="container">
<p>ㅎㅇㅎㅇㅎㅇㅎㅇ</p>
<p>ㅎㅇㅎㅇㅎㅇㅎㅇ</p>
<p>ㅎㅇㅎㅇㅎㅇㅎㅇ</p> <!--스크롤을 만들기 위한 <p>-->
</div>
</body>
</html>