#BootStrap

card

1. 카드를 옆으로 넘길수 있는 버튼 추가

• Bootstrap의 Carousel 컴포넌트를 사용하면 구현할수 있음

Carousel??

• 슬라이드쇼 형식의 컴포넌트로, 여러개의 아이템을 순차적으로 보여주며, 버튼을 통해 이전/ 다음아이템으로 이동할 수 있다.

• 더 많은 카드를 추가하려면 Carousel의 각 아이템에 Grid system을 사용하여 여러 카드를 배치하면 된다.

예시

<div id="my-carousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="card" style="width: 17rem;">
                            <div class="card-img-top" style="position:relative;">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657716136779l0.jpg" class="card-img-top" alt="...">
                                <button type="button" class="btn cart-btn" style="position: absolute; cursor: pointer; bottom: 10px; right: 10px; border-radius: 50%; width: 55px; height: 55px; background-color: rgba(50, 50, 50, 0.5); border: none;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-cart2" viewBox="0 0 16 16">
                                        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                                    </svg>
                                </button>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">[모모스커피] 커피 캡슐 3종(네스프레소 호환)</h5>
                                <p class="card-text" style="font-size: 20px;">
                                    <span style="color: #ff1500;"><b>15%</b> </span><b>8,500원~</b><br/>
                                    <span style="font-size: 17px; color: #999; text-decoration: line-through;">10,000원</span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="card" style="width: 17rem;">
                            <div class="card-img-top" style="position:relative;">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657716136779l0.jpg" class="card-img-top" alt="...">
                                <button type="button" class="btn cart-btn" style="position: absolute; cursor: pointer; bottom: 10px; right: 10px; border-radius: 50%; width: 55px; height: 55px; background-color: rgba(50, 50, 50, 0.5); border: none;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-cart2" viewBox="0 0 16 16">
                                        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                                    </svg>
                                </button>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">[모모스커피] 커피 캡슐 3종(네스프레소 호환)</h5>
                                <p class="card-text" style="font-size: 20px;">
                                    <span style="color: #ff1500;"><b>15%</b> </span><b>8,500원~</b><br/>
                                    <span style="font-size: 17px; color: #999; text-decoration: line-through;">10,000원</span>
                                </p>
                            </div>
                        </div>
                    </div>

                 ..... 카드 계속 추가
		
	//첫번째 단락
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="container">
                <div class="row">


                   //두번째 단락

                </div>
            </div>
        </div>

    </div>
//양옆 버튼 
    <a class="carousel-control-prev" href="#my-carousel" role="button" data-slide="prev">
        **<i class="bi bi-arrow-left-circle" style="font-size: 50px; color: black;"></i>** // <--부트스트렙 아이콘 추가해서 넣었음
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#my-carousel" role="button" data-slide="next">
        <i class="bi bi-arrow-right-circle" style="font-size: 50px; color: black;"></i>
        <span class="sr-only">Next</span>
    </a>
</div>

Tip> 하단의 페이지 표시버튼 = "인디케이터"라고 한다.