부트스트랩 캐러셀 사이즈 조절

본문 바로가기

부트스트랩 캐러셀 사이즈 조절

작성일 2023.05.08댓글 1건
    게시물 수정 , 삭제는 로그인 필요


안녕하세요 웹사이트 제작중인 학생인데요 부트스트랩에서 캐러셀을 긁어와서 사용중인데 페이지 본 사이즈에 비해 너무 작아서 그런데 캐러셀 사이즈를 늘릴 수 있는 방법이 있나요 아예 꽉 채우고 싶어요


#부트스트랩 캐러셀 #부트스트랩 캐러셀 여러개 #부트스트랩 캐러셀 크기조절 #부트스트랩 캐러셀 자동 슬라이드 #부트스트랩 캐러셀 버튼 #부트스트랩 캐러셀 사용법 #부트스트랩 캐러셀 이미지 크기 #부트스트랩 캐러셀 안됨 #부트스트랩 캐러셀 사이즈 #부트스트랩 캐러셀 시간

profile_image 익명 작성일 -

안녕하세요?

화면을 꽉 채우도록 사이즈를 늘리시려면

carousel-item 클래스 div 안의 이미지에 스타일을

style="width:100%; height:500px;"

이런식으로 width를 100%로 주시면 됩니다.

​

샘플코드입니다.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" rel="stylesheet"> <script src="https://getbootstrap.com/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> </head> <body> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://ssl.pstatic.net/static/kin/09renewal/promotion/main/rb_4_main_20230501145405.png?ver=20230501025405" style="width:100%; height:500px;" /> </div> <div class="carousel-item"> <img src="https://ssl.pstatic.net/static/kin/09renewal/promotion/main/rb_3_main_20230313133628.jpg?ver=20230313013628" style="width:100%; height:500px;" /> </div> <div class="carousel-item"> <img src="https://ssl.pstatic.net/static/kin/09renewal/promotion/main/rb_1_main_20230426155501.png?ver=20230426035501" style="width:100%; height:500px;" /> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </body> </html>

결과확인:

https://jsfiddle.net/xxxvvvxxx/aj0uys4o/

Edit fiddle - JSFiddle - Code Playground

Start with a boilerplate: jQuery Vue React React + JSX Preact TypeScript CoffeeScript SCSS CSS Grid Bootstrap PostCSS Links:  Roadmap (vote for features)  Bug tracker  Docs  Service status Support JSFiddle and get extra features Groups, Private fiddles, Ad-free & more JSFiddle is for: Demos for...

jsfiddle.net

​

Ref.

https://indifference.com/collage/category/programming-8

콜라주 - Programming | Phenomena

n. A piece of art made by sticking various different materials aka PHENOMENA Magazine - PHENOMENA

indifference.com

​

연관된 질문 답변 리스트

부트스트랩 캐러셀 사이즈 조절

안녕하세요 웹사이트 제작중인 학생인데요 부트스트랩에서 캐러셀을 긁어와서 사용중인데 페이지 본 사이즈에 비해 너무 작아서 그런데 캐러셀...