carousel slider 추가

1.class carrousel slide 추가, id 설정 및 data-ride=”carousel” 설정

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

2. div class=carousel slide , div class=carousel-inner 추가

<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">

3. 추가하고자 하는 slider item carousel-item을 추가 후, 안에 img 추가

<div class="carousel-item active"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span> 
    <img class="d-block w-100" width="400px" height="500px" src="first.png" alt="First Slide"> 
</div>

4. 좌우 page 전환 `prev, next button` 추가

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

5.최종 추가된 sample

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" width="400px" height="500px" src="first.png" alt="First Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" width="400px" height="500px" src="second.png" alt="Second Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" width="400px" height="500px" src="third.png" alt="Third Slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
        </a>
    </div>
</div>

7. 최종 sample output