javascript

carousel slider 추가

1월 8, 2018 bootstrap No comments ,

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

bootstrap 처음 사용

1월 5, 2018 bootstrap No comments ,

bootstrap 사용

참고 site : https://getbootstrap.com

최초 index.html 파일 생성

<html> 
 <head> 
 <title>Test bootstrap</title>
 </head>
 <body>
 <h1>Test bootstrap</h1>
 </body>
</html>

bootstrap files link 추가 body tag 안에 추가

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

button 추가

<button type="button" class="btn btn-primary">Primary</button>

primary_button