HTML, CSS 및 동적 부트스트랩을 사용하여 회전 목마 슬라이드(여러 항목) 만들기
이미지 슬라이드를 만들기 위한 html 및 css 웹 프로그래밍을 배울 때 올빼미 회전 목마를 사용하여 만들 수 있는 이 간단한 슬라이드를 실제로 만드는 동적 부스트랩 회전 목마를 만드는 방법을 알아야 합니다. 하지만 이 게시물에서는 부트스트랩 4를 사용하여 회전 목마를 만드는 방법만 보여 드리겠습니다.
회전 목마는 이미지 또는 텍스트 형식의 슬라이드 형식의 항목 구성 요소입니다.
bootstrap 4(css 프레임워크)로 캐러셀 슬라이드를 만든 이유는 추가 도구를 사용할 필요가 없고 더 간단하기 때문입니다. 원하는 대로 슬라이드 스타일을 지정하기 위해 약간의 CSS를 제공할 수도 있습니다.
이 튜토리얼에서는 부스트랩 4로 캐러셀을 만들고 있으므로 준비해야 할 사항은 다음과 같습니다.
확장자가 .html인 파일을 생성합니다(예: 이미 bootstrap 4에 연결된 index.html). getboostrap.com 지침(온라인)에 따라 링크를 직접 붙여넣거나 로컬 부트스트랩 파일을 먼저 다운로드하여 부스트랩 4를 온라인에서 오프라인으로 사용하세요.
무료 확장자가 있는 이미지 또는 사진(jpg, jpeg 또는 png).
동적 부트스트랩 4 캐러셀을 만드는 방법
이 부스트 스트랩을 사용하여 간단한 회전 목마를 만들기 위해 코딩을 복사하여 붙여넣으십시오.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hardifal.com</title>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide m-4" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
<div class="col card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
<div class="col card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
<div class="col card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-6 card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
<div class="col-6 card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
<div class="col-6 card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
<div class="col-6 card">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Title</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
그런 다음 결과를 실행합니다.
참고: 링크에 주의하십시오. 저장한 이미지 주소에 따라 이미지 링크를 변경했는지 확인하십시오.
이것이 원하는 수까지 여러 이미지로 동적 부트스트랩 캐러셀을 만드는 방법입니다.