<!-- 整個輪播的框架設定ID名稱,例如:carouselTop --> <div id="carouselTop" class="carousel slide" data-bs-ride="carousel"> <!-- 這是下方輪播圖片的指引器,有3張圖片就有3個button,data-bs-target必須對應到ID名稱 --> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselTop" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselTop" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselTop" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <!-- 這裡是顯示輪播圖片的地方,一個carousel-item區塊框放一張圖片 --> <div class="carousel-inner"> <div class="carousel-item active"> <!-- d-block代表display:block,w-100代表width:100% --> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <!-- 這是左側「上一張」按鈕,data-bs-target必須對應到ID名稱 --> <button class="carousel-control-prev" type="button" data-bs-target="#carouselTop" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <!-- 這是右側「下一張」按鈕,data-bs-target必須對應到ID名稱 --> <button class="carousel-control-next" type="button" data-bs-target="#carouselTop" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>
#sec1 { padding: 0; } #sec1, .carousel, .carousel-inner, .carousel-item { width: 100%; height: 100%; } .carousel-item { background-size: cover; background-position: center; } .carousel-item:nth-of-type(1) { background-image: url(./img/slide1s.jpg); } .carousel-item:nth-of-type(2) { background-image: url(./img/slide2s.jpg); } .carousel-item:nth-of-type(3) { background-image: url(./img/slide3s.jpg); } @media (min-width:600px){ .carousel-item:nth-of-type(1) { background-image: url(./img/slide1m.jpg); } .carousel-item:nth-of-type(2) { background-image: url(./img/slide2m.jpg); } .carousel-item:nth-of-type(3) { background-image: url(./img/slide3m.jpg); } } @media (min-width:992px){ .carousel-item:nth-of-type(1) { background-image: url(./img/slide1.jpg); } .carousel-item:nth-of-type(2) { background-image: url(./img/slide2.jpg); } .carousel-item:nth-of-type(3) { background-image: url(./img/slide3.jpg); } }