SMALL
slider lib, slider plugin
1) vanilla script base
ex> 설명서,파일다운로드
구성파일
슬라이더.js --------> 슬라이더.css
페이지 슬라이더 적용 -> js작성
1) 슬라이더.css 링크 -> 다운로드, CDN링크
2) 슬라이더.js 링크 -> 다운로드, CDN링크
3) 슬라이더 동작.js => 사용자가 작성
2) jQeury base
- 슬라이더.js
- 슬라이더.css
- 슬라이더동작.js -=> 사용자가 작성함
HTML문서
1. 슬라이더.css연결
2. jQeury.lib 연결
3. 슬라이더.js연결
4. 슬라이더동작.js -> 사용자가 직접 작성
****** 중요
jQuery기반의 슬라이더는
jQuery버젼에따라 동작하거나 동작하지 않을수 있음.
jQuery 1.x, 2.x , 3.x (최신버젼)
jQuery는 일부슬라이더를 제외하고 거의 대부분
1.x버젼에서 동작하는 경우가 많음(만들어진지 오래되서)-> 업글X
***************************슬라이더 스크립트 작성위치
1) 슬라이더를 구성하는 html요소 바로뒤에
2) body의 가장 끝 쪽에 작성
************** 슬라이더 컨텐츠 작성시
**슬라이더 전체를 감싸는 박스를 생성하기 - 컨텐츠 크기를 결정하기
**그안에 슬라이더 라이브러리에서 요구하는 html 요소 작성하기
첫번째방법
<head>
<!-- 01) bxslider css load -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<!-- 02) jQuery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 03) bxslider lib -->
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<body>
<!-- bx slider시작 -->
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
<!-- bx slider끝 -->
<!-- page js -->
<script>
// 04) bx slider 호출
$(".slider").bxSlider();
</script>
</body>
</html>
<!--
슬라이더 동작순서
04) -- 요소에 슬라이더 명령을 적용
03) -- bx slider.js를 활용하여 슬라이더 동작
02) -- jQuery를 이용하여 바닐라스크립트로 변환
01) -- 브라우저가 실행 -- 디자인은 bxslider.css를 호출
-->두번째방법
<head>
<!-- 01) bxslider css load -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
img {
width: 100%;
}
.sliderbox {
width: 1000px;
margin: 0 auto;
}
.bx-wrapper .bx-pager.bx-default-pager a {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: blueviolet;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
bottom: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
background-color: aqua;
}
</style>
<!-- 02) jQuery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 03) bxslider lib -->
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<body>
<div class="sliderbox">
<!-- bx slider시작 -->
<div class="slider">
<div><img src="600x400/01.jpg" alt=""></div>
<div><img src="600x400/02.jpg" alt=""></div>
<div><img src="600x400/03.jpg" alt=""></div>
<div><img src="600x400/04.jpg" alt=""></div>
</div>
<!-- bx slider끝 -->
</div>
<!-- page js -->
<script>
// 04) bx slider 호출
$(".slider").bxSlider({
mode : 'fade',
pager : true,
controls : true
});
</script>
</body>
</html>
<!--
슬라이더 동작순서
04) -- 요소에 슬라이더 명령을 적용
03) -- bx slider.js를 활용하여 슬라이더 동작
02) -- jQuery를 이용하여 바닐라스크립트로 변환
01) -- 브라우저가 실행 -- 디자인은 bxslider.css를 호출
-->세번째방법
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex slider</title>
<!-- 01 flexslider css가져오기 -->
<link rel="stylesheet" href="FlexSlider/flexslider.css">
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="600x300/s01.png" />
</li>
<li>
<img src="600x300/s02.png" />
</li>
<li>
<img src="600x300/s03.png" />
</li>
</ul>
</div>
<!-- 02 jQuery lib 가져오기 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- 03 flexslider lib 가져오기 -->
<script src="flexslider/jquery.flexslider.js"></script>
<!-- 04 page 스크립트 작성영역 -->
<script>
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!(2) (0) | 2023.04.10 |
|---|---|
| 자바스크립트 javascript 11. OOP 객체지향프로그래밍 (0) | 2023.04.10 |
| 자바스크립트 javascript 9. 자바스크립트 DOM, 다양한 효과넣기 (0) | 2023.04.07 |
| 자바스크립트 javascript 8. 동적으로 움직이는 서브메뉴 만들기 (0) | 2023.04.07 |
| 자바스크립트 javascript 7. 서브메뉴만들기 5 (심화편) (1) (0) | 2023.04.04 |
댓글