제이쿼리 기초, 제이쿼리 이미지 슬라이더 기초

# 제이쿼리 기초

## 제이쿼리 불러오기

// 제이쿼리 불러오기
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

 

 

## 제이쿼리 슬라이더의 사이드 버튼에 클릭이벤트 설정

 

 

 

## 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정

## 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정(사단장 변수 없이)

 

 

 

## 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정(변수 없이)

 

 

 

## 제이쿼리 엘리먼트 3개 만들고 각각을 클릭하면 서로 다른 디자인 변화가 일어나도록 구현

 

 

 

## 제이쿼리 버튼을 클릭하면 반응하는 엘리먼트 생성

 

 

## 제이쿼리 버튼 2개 만들고 각각 다르게 반응하게 구현

 

 

## 제이쿼리 index, prev, next

 

 

 

# 제이쿼리 이미지 슬라이더 기초

## 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더 배경색 변경되도록 구현

### 코드1

• var $클릭된_버튼 = $(this);
• var $btns = 클릭된_버튼.parent();
• var $슬라이더 = $btns.parent();
• 슬라이더.css('background-color',

 

### 코드2

• var $클릭된_버튼 = $(this);
• var $슬라이더 = $클릭된_버튼.parent().parent();
• $슬라이더.css('background-color', 'pink');

 

### 코드3

• var $슬라이더 = $(this).parent().parent();
• 슬라이더.css('background-color',);

### 코드4

• $(this).parent().parent().css('background-color', 'pink');

### 코드5 

• var $슬랑이더 = $(this).closest('.slider');
• 슬라이더.css('background-color',);
• $(this).closest('.slider') : this의 조상 중 slider 클래스를 가지고 있는 것으로만 추리고, 그 중 this와 가장 가까운 단 한명만 검색한다.

 

## 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더에 속한 슬라이드가 삭제되도록 구현

### 코드1

## 코드2

 

 

## 제이쿼리 좌, 우 버튼을 클릭 했을 때 관련된 슬라이더만 작동되도록 구현

 

##