๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ HTML\CSS/๐Ÿ›ฐ๏ธ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ BootStrap

9๏ธโƒฃ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Carousel ์นด๋ฃจ์…€

by Meteora_ 2021. 2. 26.
728x90


 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
  
 
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <!-- ํด๋”๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‚ฌ์šฉ์‹œ ์†๋„๋น ๋ฆ„ -->
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
  
</head>
<body>

<!-- Carousel(ํšŒ์ „๋ชฉ๋งˆ:๋Œ์•„๊ฐ€๋Š”์ด๋ฏธ์ง€) -->
<h1 class="text-center mb-5">component:carousel</h1>
<h2 class="text-center mb-4">๊ธฐ๋ณธ์ ์ธ ์‚ฌ์šฉ ์˜ˆ</h2>

<div class="container">


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

	<div class="carousel-inner"> 
		<!-- first-slide -->
		<div class="carousel-item active">
		<img alt="first" class="d-block w-100" src="http://placehold.it/1600x900&text=First ">
		</div>
		
		<!-- second-slide -->
		<div class="carousel-item">
		<img alt="first" class="d-block w-100" src="http://placehold.it/1600x900&text=Second ">
		</div>
		
		<!-- third-slide -->
		<div class="carousel-item">
		<img alt="first" class="d-block w-100" src="http://placehold.it/1600x900&text=Third ">
		</div>
		
		
	</div>

</div>



</div>


</body>
</html>

๋Œ“๊ธ€