This is the 22nd day of my participation in Gwen Challenge
“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.
22.1 Multicast Components
A Carousel is a slide show component used to loop between elements, images, or text slides, such as a Carousel.
Carousel is a slide show for looping over a series of content, using CSS3D transformations and a little JavaScript build. It can process a range of images, text, or custom tags. It also includes support for previous/next controls and indicators.
In browsers that support the page visibility API, scrolling is avoided when the user cannot see the web page (for example, when the browser TAB is inactive, the browser window is minimized, and so on).
Rotation does not automatically standardize slide sizes. Therefore, you may need to use additional generic categories or custom styles to size the content appropriately. Although the previous/next control and indicators are supported in rotation, they are not required items. Can be added and customized as required.
22.2 Examples of different forms of round casting
22.2.1 Rotation of slides only
This is a slide show rotation. Note the presence of. D-block and. W-50 on the rotation image to avoid the browser’s default image alignment. The following code changes the image every 5 seconds.
<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > by < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src=".. /pic/3.jpg" class="d-block w-100" alt="..." > </div> <div class="carousel-item"> <img src=".. /pic/4.jpg" class="d-block w-100" alt="..." > </div> <div class="carousel-item"> <img src=".. /pic/6.jpg" class="d-block w-100" alt="..." > </div> </div> </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
22.2.2 Bring one and the next control
Add the previous and next controls. We recommend using the button element, but we can also use the A element with role=”button”. Note that to set the image size and width, you need to set the size of the Carousel container. The image must be w-100, full of the container, or the next one may not be seen.
<div id="carouselExampleControls" class="carousel slide w-50" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src=".. /pic/3.jpg" class="d-block w-100" alt="..." > </div> <div class="carousel-item"> <img src=".. /pic/4.jpg" class="d-block w-100" alt="..." > </div> <div class="carousel-item"> <img src=".. /pic/6.jpg" class="d-block w-100" alt="..." > </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>Copy the code
The greater-than and less-than signs on either side of the picture are the previous and next controls.
22.2.3 With indicators
The indicator is the three white bars in the image below. Click to switch directly to the corresponding image.
<div id="carouselExampleIndicators" class="carousel slide w-50" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div><div class="carousel-inner"> <div class="carousel-item active"> <img src=".. /pic/3.jpg" class="d-block w-100" alt="..." > </div> <div class="carousel-item"> <img src=".. /pic/4.jpg" class="d-block w-100" alt="..." > </div> <div class="carousel-item"> <img src=".. /pic/6.jpg" class="d-block w-100" alt="..." > </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>Copy the code
22.2.4 with subtitles
Add caption to any Carousel-item with a Carousel-Caption. You can choose to use display generic categories to easily hide them on smaller viewports, as shown below, initially hiding them with D-None and redisplaying them on medium-sized devices with D-MD-block.
<div id="carouselExampleCaptions" class="carousel slide w-50" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div><div class="carousel-inner"> <div class="carousel-item active"> <img src=".. /pic/3.jpg" class="d-block w-100" alt="..." > <div class="carousel-caption d-none d-Md-block "> <h5> < br > - li bai in tang dynasty "qingping adjustable, secondly" < / p > < / div > < / div > < div class = "carousel - item" > < img SRC = ".. /pic/4.jpg" class="d-block w-100" alt="..." > <div class="carousel-caption d-none d-md-block"> <h5> < br > - han's "seven, the first four, miscellaneous poems" < / p > < / div > < / div > < div class = "carousel - item" > < img SRC = ".. /pic/6.jpg" class="d-block w-100" alt="..." > <div class="carousel-caption d-none d-Md-block "> <h5> </p> </div> </div> </div> <button class=" carousel-Control-prev "type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>Copy the code
22.2.5 Fade in and out
Add carousel-fade to the Carousel container to use fade in and out instead of sliding. I’m not going to show you this part, including the last two, which are all one parameter things.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
Copy the code22.2.6 Setting an Interval
Add data-bs-interval=”” to carousel-item to change the delay for the automatic loop to the next item. This parameter needs to be set for each arousel-item in milliseconds, or 5000 if the interval is 5 seconds. Here is the set interval of 10 seconds.
<div class="carousel-item active" data-bs-interval="10000">
Copy the code22.2.7 Disable touch switching
The castor component allows you to swipe left and right on a touchscreen device to move between slides. This can be disabled using the data-bs-touch property. The following example does not include the data-bs-ride property and has data-bs-interval=”false”, so it does not play automatically.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
Copy the code22.2.8 dark variant
Add Carousel-Dark to Carousel to get dark controls, indicators, and subtitles. Controls have been reversed from their preset white fill via the CSS filter property. Subtitles and controls have additional variables that define color and background-color.
Let’s take the example of adding Carousel-Dark in 22.2.4 to see what happens
<div id="carouselExampleCaptions" class="carousel carousel-dark slide w-50" data-bs-ride="carousel">
Copy the code
Because the image color itself is a little dark, so use this effect is not good, if it is a bright picture will look good, you can try.
Today’s course is here, limited to space, some content did not say, you can check the Bootstrap5 Chinese manual, please pay attention to me, timely learn my original “Bootstrap5 zero foundation to master” section 23 Bootstrap5 drop-down menu component usage, from the literal can also be seen, A button group is a group of buttons.
If this article is helpful, please feel free to like it!