Bootstrap] 슬라이드 (Carousel) 만들기

Bootstrap에서 Carousel(슬라이드) 찾는 법 

Docs -> Components -> Carousel (카러즐)

 

https://getbootstrap.com/docs/5.0/components/carousel/

 

부트스트랩에서 코딩 복사해서 붙이기 

 

 

 

 

 carousel 기타 옵션 

 

 

 

슬라이드 자동 재생 스피드 조절 

interval:  5000ms(5초)로 기본 설정. 5초 후에 다음 슬라이드 자동으로 보여진다. 

 

3초 후로 바꿔보기 

data-bs-interval="3000"

 

 

 

마우스 올렸을 때 슬라이드 자동실행 멈춤

data-bs-pause="hover"

 

 

 

슬라이드로 안하고 싶을 때

slide를 클래스에서 삭제한다. 

 

 

자동 재생 멈추고 싶을 때 

ride를 false로 설정해 준다. 

 

 

control button 살펴보기 

1 번째 라인

class = "carousel-control-prev"

왼쪽 버튼

data-bs-target 

해당 버튼을 눌렀을 때 어디로 갈지 정해준다

id로 #이름을 정해주면 전체에 하나 밖에 없어서 찾기가 쉽다. 

data-bs-slide="prev" 

이전으로 돌아감

 

2번째 라인

<span>: 삼각 버튼을 나타냄 

aria-hidden="true"

시각 장애인이 사용하는 스크린리더 기기가 화면을 읽어 줄 때 aria-hidden="true"가 안들어가면 

왼쪽 버튼, 오른쪽 버튼하고 불필요하게 기계가 계속 읽게 됨. 기계가 버튼은 안일고 스킵하게 함. 

 

3번째 라인

<spanclass="visually-hidden">Previous</span>

시각 장애인이 사용하는 스크린 리더에서만 사용. 

스크린 리더가 화면 읽을 때 클래스에 있는대로 carousel-control-prev-icon button이라고 안읽고,

previous라고 읽어라 라고 명령. 

 

 

버튼 사이즈 조절

작은 버튼

해당 클래스를 선택해서 width와 height조절하기

 

.carousel-control-prev-icon,

.carousel-control-next-icon {

height: 100px;

width: 100px;

}

 

커진 버튼

 

텍스트 / 버튼 위치 조절 

 

텍스트 안에 버튼이 들어가 있는데 텍스트 들어간 div에 padding 주기