<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<!--data-bs-interval를 통해 이미지 자동 전환-->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="500">
<img src="img/a.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="100">
<img src="img/b.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="100">
<img src="img/c.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous">
</script>
</body>
</html>
'단순 코드 기록 > BootStrap' 카테고리의 다른 글
| BootStrap_HideData (0) | 2024.02.09 |
|---|---|
| BootStrap_Image_Slide (0) | 2024.02.09 |
| BootStrap_Button_input (0) | 2024.02.09 |
| BootStrap_Button_Grid (0) | 2024.02.09 |
| BootStrap_Button (0) | 2024.02.09 |