은은하게 코드 뿌시기

제이쿼리(jQurey) - 플러그인 본문

웹/웹프로그래밍

제이쿼리(jQurey) - 플러그인

은은하게미친자 2022. 11. 15. 11:01
728x90

제이쿼리 플러그인

 

: 기능을 구현해 놓은 프로그래밍을 자바스크립트 파일로 제공하는 제이쿼리 라이브러리

이 제이쿼리 플러그인도 가전제품의 플러그처럼 내 웹 문서에 가져다 연동시키기만 하면 바로 사용할 수 있습니다.

<head>
    <script>
        1. 제이쿼리 라이브러리 연동
        2. 플러그인 연동        
    </script>
</head>

bxslider 사용해보기 : 플러그인을 사용해보자!

https://bxslider.com/

 

jQuery Content Slider | Responsive jQuery Slider | bxSlider

Coded with ♥ by

bxslider.com

사이트의 깃허브 버튼을 눌러 

플러그인을 다운받는다

다운받은 파일을 압축을 풀고 아래 사진속 파일을 복사한다.

작업중인 경로에 plugin 폴더를 만들고 

그안에 위에 내용을 붙여 넣어 준다!

css 폴더안에 images폴더를 만들어 주고

안에 slider, controls 파일을 옮겨줌

폴더 경로는 압축 파일을 참고!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/jquery.bxslider.js"></script>
    <link rel="stylesheet" href="css/jquery.bxslider.css">
    <style>
        .slider-wrap{
            max-width: 640px;
        }
 
    </style>
    <script>
        //아래있는 문서 객체를 읽고 실행하라
        $(document).ready(function(){
            $('.slider').bxSlider();
        });
    </script>
</head>
<body>
 
    <div class="slider-wrap">
        <!--    ul.slider>li*7>img[src="images/pic_$.jpg"] 컨트롤앤터 누르면 아래와같이 확장-->
        <ul class="slider">
            <li><img src="images/pic_1.jpg" alt=""></li>
            <li><img src="images/pic_2.jpg" alt=""></li>
            <li><img src="images/pic_3.jpg" alt=""></li>
            <li><img src="images/pic_4.jpg" alt=""></li>
            <li><img src="images/pic_5.jpg" alt=""></li>
            <li><img src="images/pic_6.jpg" alt=""></li>
            <li><img src="images/pic_7.jpg" alt=""></li>
        </ul>
    </div>
 
</body>
</html>
 cs

plugin.zip
1.59MB

 

 

 

728x90

'웹 > 웹프로그래밍' 카테고리의 다른 글

[자바스크립트] location.href 새창 띄우기/ 버튼onclick으로 경로이동하기  (0) 2022.12.22
자바스크립트/javascript - javascript:void()  (0) 2022.11.25
자바스크립트 - 함수  (0) 2022.11.10
자바스크립트 - 객체  (0) 2022.11.10
자바스크립트 제어문 - 조건문 /반복문  (0) 2022.11.10
'웹/웹프로그래밍' Related Articles more
Comments