Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to realize the image carousel effect in Bootstrap." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to realize the picture carousel effect in Bootstrap"!

1 carousel component

A carousel is a slide show component that loops between elements, images, or text slides, such as a carousel.

Carousel is a slideshow for looping through a series of content, built using CSS3D transformation and a bit of JavaScript. It can process a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

In browsers that support the page visibility API, carousels avoid sliding when the user does not see the page (e.g. browser tabs are inactive, browser windows minimized, etc.).

Carousels do not automatically standardize the size of slides. As a result, you may need to use additional generic categories or custom styles to resize content appropriately. Although carousels support previous/next controls and indicators, they are not required items. Can be added and customized according to requirements.

2 Examples of different forms of carousel 2.1 Slide-only carousel

This is a carousel of slides only. Note the presence of.d-block and.w-50 on carousel images to avoid browser default image alignment. The following code changes the picture every 5 seconds.

carousel

2.2 Bring one and the next control

Add previous and next controls. We recommend using the button element, but you can also use the a element with role="button". It should be noted that to set the size and width of the image, you need to set the size of the carousel container, the image setting must be w-100, full of containers, otherwise the next one may not be visible.

Previous Next

The greater than sign and less than sign on either side of the picture are the previous and next controls.

2.3 with indicator

The indicator is the three white bars in the picture below. Click to switch directly to the corresponding picture.

Previous Next

2.4 with subtitles

Use carousel-caption in any carousel-item to add a caption to the slide. You can choose to use the display generic category to easily hide them on smaller viewports, as shown below, initially hide them with d-none and use d-md-block to make them reappear on medium-sized devices.

the first slide

A branch of red dew condensation fragrance, rain wushan wronged heartbroken.

_Qing Pingdiao·II by Li Bai of Tang Dynasty

The second slide

There is a beautiful woman in the south, Rong Hua is like peach and plum.

_Cao Zhi's Seven Miscellaneous Poems of Han Dynasty

Slide 3

Clouds want clothes, flowers want to accommodate, spring breeze threshold dew.

_Li Bai's Qing Ping Diao·Yi Yi in Tang Dynasty

Previous Next

2.5 fade

Add carousel-fade to the carousel container to use fade-in animation instead of sliding. This part will not be demonstrated, including the latter two, which are all things with one parameter.

2.6 set the time interval

Add data-bs-interval="" to carousel-item to change the delay time for automatic cycling to the next item. This parameter needs to be set at each arousel-item, and the time unit is milliseconds. If the interval is set to 5 seconds, it will be 5000. Below is a 10 second interval.

2.7 Disable touch toggling

The carousel component supports swiping left/right on the touchscreen device to move between slides. This can be disabled using the data-bs-touch attribute. The following example does not include the data-bs-ride attribute and has data-bs-interval="false", so it does not play automatically.

2.8 dark variant

Add carousel-dark to carousel for dark controls, indicators, and subtitles. Controls have been inverted from their default white fill through the CSS property filter. Captions and controls have additional variables for custom color and background-color.

Let's take 22.2.4 and add carousel-dark as an example to see the effect

At this point, I believe everyone has a deeper understanding of "how to realize the image carousel effect in Bootstrap," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.