Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

웹 프로그래밍/공부일지

캐러셀 ( carousel ) 만들기 / 반응형 슬라이드 만들기

✿도담도담 2018. 9. 19. 17:51





[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기

[Web Programming] - [ jQuery ] 슬라이드 배너 만들기 2편


이전에는 플러그인을 써서 만들어봤다면

드디어 슬라이드(캐러셀)를 만들어봤다.


내가 생각한 알고리즘은 아래와 같다.


처음 슬라이드에서는 0번째 친구만 보여지고 나머지 친구들은 1번다음에 쌓여서 대기하고있다.

그다음 슬라이드가 왼쪽으로 이동하는데 현재 인덱스와 ( 0 ) 그다음 나타날 인덱스 ( 1 )이 왼쪽으로 이동한다.

그리고 나서 지나간 0번의 친구가 다시 대기 중인 영역에 와서 기다리고있는 것!



<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="../js/carousel.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/carousel.css">
</head>
<body>
    <div id="carousel_section">
        <ul>
            <li> <img src="../img/img01.png"> </li>
            <li> <img src="../img/img02.png"> </li>
            <li> <img src="../img/img03.png"> </li>
            <li> <img src="../img/img04.png"> </li>
        </ul>
    </div>
</body>
</html>
 
cs
html은 위와 같이 간단하다,
bxSlider을 참고로 div안에 목록태그를 사용해서 틀을 잡았다.


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
body{
    margin: 0px;
}
#carousel_section{
    width: 100%;
    background-color: gray;
}
#carousel_section > ul{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#carousel_section > ul > li{
    list-style: none;
    width: 100%;
    height: 100%;
    position: absolute;
}
#carousel_section > ul > li >img{
    list-style: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
cs

css에서는 반응형으로 만들기 위해 width 100%를 주었고 목록 스타일을 없애기 위해 list-style을 none;주었다.
그리고 이미지에 너비와 높이를 지정하니 찌그러지는 현상을 없애고 싶어서
object-fit 속성에 cover을 줌으로써 사진이 비율을 유지하면서 너비와 높이를 가득 채우도록 확대시켰다.
아, 추가적으로 슬라이드 영역을 벗어나는 곳을 ( = 대기 영역 ) 숨겨야 하니 overflow : hidden;도 까먹지 말자.
여기까지는 어려운 것이 없었다 !

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var time; // 슬라이드 넘어가는 시간
var $carouselLi;
var carouselCount; // 캐러셀 사진 갯수
var currentIndex; // 현재 보여지는 슬라이드 인덱스 값
var caInterval;
 
//사진 연결
var imgW; // 사진 한장의 너비    
$(document).ready(function(){
 
    carouselInit(5002000);
});
 
$(window).resize(function(){
    carousel_setImgPosition();
});
 
/* 초기 설정 */
function carouselInit( height, t ){
    /*
     * height : 캐러셀 높이
     * t : 사진 전환 간격 
    */
 
    time = t;
    $("#carousel_section").height(height); // 캐너셀 높이 설정
    $carouselLi = $("#carousel_section > ul >li");
    carouselCount = $carouselLi.length// 캐러셀 사진 갯수
    currentIndex = 0// 현재 보여지는 슬라이드 인덱스 값
    carousel_setImgPosition();
    carousel();
}
 
function carousel_setImgPosition(){
 
    imgW = $carouselLi.width(); // 사진 한장의 너비    
    // 이미지 위치 조정
    for(var i = 0; i < carouselCount; i++)
    {
        if( i == currentIndex)
        {
            $carouselLi.eq(i).css("left"0);
        }
        else
        {
            $carouselLi.eq(i).css("left", imgW);
        }
    }
}
 
function carousel(){
 
    // 사진 넘기기
    // 사진 하나가 넘어간 후 다시 꼬리에 붙어야함
    // 화면에 보이는 슬라이드만 보이기
    caInterval = setInterval(function(){
        var left = "-" + imgW;
 
        //현재 슬라이드를 왼쪽으로 이동 ( 마이너스 지점 )
        $carouselLi.eq(currentIndex).animate( { left: left }, function(){
            // 다시 오른쪽 (제자리)로 이동
            $carouselLi.eq(currentIndex).css("left", imgW);
 
            if( currentIndex == ( carouselCount - 1 ) )
            {
                currentIndex = 0;
            }
            else
            {
                currentIndex ++;
            }
        } );
 
        // 다음 슬라이드 화면으로
        if( currentIndex == ( carouselCount - 1 ) )
        {
            // 마지막 슬라이드가 넘어갈땐 처음 슬라이드가 보이도록
            $carouselLi.eq(0).animate( { left: 0 } );
        }
        else
        {
            $carouselLi.eq(currentIndex + 1).animate( { left: 0 } );
        }
    }, time);
}
cs


우선 초기 설정 함수를 만들어 변수 선언과 함수들을 선언해주었다.


 carousel_setImgPosition() 함수에서는 이미지의 위치를 지정해준다.

현재 이미지의 크기 ( 즉, 브라우저 창의 너비 )를 변수에 저장해노은 뒤에

화면에 보여지는 영역과 대기중인 영역으로 사진을 셋팅 해주는 역할이다. ( 맨 처음 설명 참조 )


이제 이미지를 셋팅 했으니 슬라이드 애니메이션을 만들어 줘보자.

해당 역할은 carousel()에서 해준다.

currentIndex값을 두고 ( 현재 화면에 표시되는 인덱스, 편하게 0이라고 칭하겠다. ),

0번째 사진이 왼쪽으로 이동함과 동시에 1번째 사진도 왼쪽으로 이동한다.


 $carouselLi.eq(currentIndex).animate( { left: left }, function(){
            // 다시 오른쪽 (제자리)로 이동
            $carouselLi.eq(currentIndex).css("left", imgW);
 
            if( currentIndex == ( carouselCount - 1 ) )
            {
                currentIndex = 0;
            }
            else
            {
                currentIndex ++;
            }
        } );


이후 0번째 친구가 왼쪽으로 다 이동한 뒤에 다시 오른쪽 ( = 대기 영역 ) 으로 옮겨진다.

그 다음에 currentIndex값을 증가 시켜서 다음 차례에 똑같은 현상이 반복 되도록 만들었다!


여기까지 하면 반응형이 아닌 일반 슬라이드가 될 것이다.

( 아마 작은 창에서 시작해서 큰창으로 사이즈를 변경하면 이상해질 것...ㅎㅎ.. )


이를 해결하기 위해 브라우저 창의 크기가 변화 할때 마다 슬라이드 크기 ( 즉, 이미지들의 크기와 위치 ) 를 변경해주었다.

$(window).resize(function(){
    carousel_setImgPosition();
});


여기서 계속 업데이트를 해서 화살표나 1, 2, 3번째 버튼을 누르면 해당 슬라이드로 가는 부분도 만들어볼 생각이다.


▼ 해당 코드들은 아래의 깃허브에서 다운 가능 하다! 😘

https://github.com/RohHyeonMin/Carousel #