[디알코] 부트스트랩 캐러셀 carousel 내가 원하는 모양 만들기 (이미지 롤링, 슬라이드)

우선 캐러셀이란 뭐냐하면 회전목마. 즉 돌고 도는 거다.

 

      

 

 

우리가 인터넷 쇼핑몰 홈페이지에 가면

상품 배너들이 오른쪽에서 왼쪽으로 움직이면서 돌아가는 걸 본 적이 있을 거다.

 

우리는 보통 이미지 슬라이드, 롤링 배너 이런 식으로 부르는데

외국에선 캐러셀이라는 이름으로 많이 쓰더라.

(슬라이드라고 부르기엔 좀 슬라이드란 표현이 너무 다양한 곳에 쓰여서 그런 걸수도)

 

 

 

 

 

아무튼 부트스트랩 캐러셀을 보면

 

 

 

기본 구조인

슬라이드 영역 class="carousel-inner" 과

 

 

 

 

옵션으로 달 수 있는

 

인디케이터 <ol class="carousel-indicators">

(몇 개의 슬라이더가 있고 현재 몇 번째다 를 보여주는거)

 

 

 

컨트롤 <a class="left carousel-control" ~

(이전, 다음 버튼)

 

 

 

 

 

 

크게 이렇게 세 가지로 구성돼있다.

 

그리고 저 세 가지는

 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

 

이렇게 생긴 큰 캐러셀 div 로 감싸져 있다.

 

 

기본적으로 가장 바깥에 carousel  클래스로 div 를 만들어주고

 

carousel-inner 클래스를 가진 div 로 안에 들어가는 item 을 넣어주면 된다.

 

 

 

 

 

 

 

carousel-inner 안에 들어가는 슬라이드 아이템은

 

 <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

 

이렇게 원하는 갯수만큼 넣어주면 되고

 

중요한건 아이템 중 하나엔 무조건 active 클래스를 넣어줘야

 

페이지에서 제대로 나오는걸 볼 수 있다.

 

 

 

 

 

 

 

 

 

슬라이드 아이템을 좀더 살펴보면

 

<div class="item">

<img src="..." alt="...">

<div class="carousel-caption">

          <h3>...</h3>

          <p>...</p>

</div>

</div>

 

이렇게 img 와 텍스트를 보여주는 caption 영역으로 나눌 수 있다.

 

텍스트를 넣지 않는다면 carousel-caption div 영역은 빼면 된다.

 

 

 

 

 

 

 

그런데 내가 만들려고 하는건

 

 

 

 

요렇게 생긴 형태다.

 

좌우로 나눠서  한쪽은 이미지, 한쪽은 그에 대한 설명이 있는.

 

그리고 이렇게 생긴게 3~4개가 롤링되는 거다.

 

 

 

 

 

 

 

위에서 봤던 코드에서

 

<img src="..." alt="...">

<div class="carousel-caption">

<h3>...</h3>

<p>...</p>

 

</div>

 

이미지는 딱 동그란 형태로 png 로 뽑아서 올릴거고

 

텍스트는 carousel-caption 부분에 넣으면 되는데

 

 

 

 

 

문제는 텍스트 위치를 잡는 거다.

 

carousel-caption 에 부트스트랩 기본 css 는

 

.carousel-caption {

    position: absolute;

    right: 15%;

    bottom: 20px;

    left: 15%;

    z-index: 10;

    padding-top: 20px;

    padding-bottom: 20px;

    color: #fff;

    text-align: center;

    text-shadow: 0 1px 2px rgba(0,0,0,.6);

}

 

이렇게 설정돼있다. 

 

 

보통 하나의 슬라이드 안에  이미지와 글자가 같이 들어가 있기 때문에

이미지 안에 글자가 적당히 위치를 잡게 만든 거다.

 

 

그리고 참고로

아이템에 이미지에

height: auto 가 설정되어 있으니까

 

이미지의 높이만큼 슬라이더의 높이가 생긴다고 보면 된다.

 

.carousel-inner > .item > img {

display: block;

max-width: 100%;

height: auto;

}

 

 

 

 

 

 

그런데 우리는 마치 이미지와 텍스트 영역이 두 개로 나뉜 것처럼 보이는 구조라서

 

carousel-caption 의 위치를 오른쪽으로 이동시켜줘야 한다.

 

그래서

 

.item .carousel-caption {

    color: #666 !important;

    text-shadow: none !important;

    right: 0 !important;

    left: 45% !important;

    width: 100px;

}

 

요로코롬 position이 absolute인 기본 속성은 그대로 두고

 

left 값을 45% 정도 줘서 오른쪽으로 팍 이동시켰다.

그리고 글자 색도 검은색으로 바꾸고

글자 그림자? 도 없애버렸다.

 

 

 

 

이렇게 해서 한걸 보면 (좀 느리다. 기다려달라.)

 

 

 

 

어느정도 제대로 된거 처럼 보이다가

 

슬라이드가 바뀌기 시작할 때

 

캡션 부분이 갑자기 왼쪽으로 붙어버리고

 

괴상한 형태를 띄며 슬라이딩이 되버린다...

 

(맥에서 영상 스크린샷을 찍고 gif 로 변환한거라 화질이 좀 구림 ㅋㅋ)

 

 

 

 

내 생각으로는 움직이기 시작할 때

left 값이 변하는거 같은데..

 

 

 

인터벌(롤링되는 시간)이 길어서 확인하기 귀찮으니까

롤링 스피드를 일단 좀 빠르게 하기 위해

 

$('.carousel').carousel({

interval: 2000

})

 

스크립트에 요걸 추가했다.

디폴트는 5000 이다.

 

 

 

 

 

 

 

개발자도구로 보니

 

 

 

 

슬라이딩이 시작될 때

 

현재 엑티브된 아이템에

 

.item .active .left  이렇게 세 개의 클래스가 붙는데

 

 

 

 

부트스트랩 css 에서 캐러셀 부분 css 를 확인해보니

 

.carousel-inner > .active {

  left: 0;

}

 

.carousel-inner > .active.left {

  left: -100%;

}

 

이런 코드가 있었다.

 

뭐..  이런 거 때문에 캡션 위치가 이동되는거 같아서

 

 

 

 

.money_item .item .carousel-caption {

left: 150px !important;

}

.money_item .item.active .carousel-caption {

left: 150px !important;

}

.money_item .item.active.left .carousel-caption {

left: 150px !important;

}

 

 

이렇게 각 상태별로 left 에 픽셀값으로 넣어줬다.ㅋㅋ

퍼센트보다는 뭔가 더 확실하게 될거 같아서.

 

 

 

그렇게 했더니

 

 

 

요렇게 캡션 위치가 잘 잡힌 채로 슬라이딩이 됐다

 

캬캬캬캬캬캬캬캬캬

 

 

 

 

 

왼쪽 오른쪽으로 좀 짤리는건, 화면 전체에 패딩이 있어서 그렇다.

 

 

 

 

 

 

암튼 이런 형태로 코드를 수정하면 

 

내가 디자인한대로 코딩 완료!

 

 

 

이 내용이 도움이 되었다면

광고를 사정없이 클릭 혹은 터치를 해주세요.

광고 노출 자체로는 거의 수익이 나지 않는 소소한 블로그랍니다 ^^