![]() Note, that slides are indexed starting at 0. Programmatically control which slide is showing via v-model (which binds to the value prop). To disable touch control, set the no-touch prop to true. On touch enabled devices, users can switch slides by swiping left or right on the carousel. sm, md, lg, xl, or custom breakpoint names if you have defined them), and will hide the headings and captions on screens smaller than the breakpoint. You can do so via the content-visible-up prop of. On smaller screens you may want to hide the captions and headings. To disable carousel slide wrapping, set the no-wrap prop to true. Normally when the carousel reaches one end or the other in the list of slides, it will wrap to the opposite end of the list of slides and continue cycling. ![]() Set the fade prop to true to animate slides with a fade transition instead of the default slide animation. You can change the slide animation to a cross-fade animation, or disable animation completely. Despite the slot's name, you can place almost any content in this slot in lieu of using the default slot or caption and text props.Ĭarousel, by default, uses a sliding animation. img content to place into the background of the slide. ![]() Appears after any content from the caption and text props. default content that will be placed inside of the inner element which has the class carousel-caption.Warning: Be cautious of using the caption-html and html props to display user supplied content, as it may make your application vulnerable to XSS attacks, if you do not first sanitize the user supplied string. ![]() html Alternate prop to the text prop, which supports HTML strings.caption-html Alternate prop to the caption prop, which supports HTML strings.img-src URL of image to be placed into the background of the slide.text Textual placed under the title (placed inside the inner element which has the class carousel-caption).caption Text to use as the main title on the slide (placed inside the inner element which has the class carousel-caption).Carousel slide contentī-carousel-slide provides several props and slots for placing content in the slide. Set the prop indicators to show the slide indicator buttons.īoth indicators and controls can be set at the same time or independently. Set the prop controls to enable the previous and next control buttons. To disable this feature, set the no-hover-pause prop on. When the users mouse hovers the carousel it will automatically pause, and will automatically restart when the mouse leaves the carousel. When the carousel is paused, the user can still switch slides via the controls (if enabled) or touch swipe (on touch enabled devices, if not disabled). To restart a paused carousel, set the interval back to the desired number of ms. To pause the carousel from auto sliding, set the interval prop to 0. Sliding will resume when the browser tab is active. In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). The smallest supported sliding interval is 1000ms (1 second). You can change the interval between slides by setting the interval prop to the desired number of milliseconds. IntervalĬarousel defaults to an interval of 5000ms (5 seconds). The img-* props map to the corresponding props available to. Internally, uses the component to render the images. Note that images will still be responsive and automatically grow or shrink to fit within the width of its parent container. When using img-src or img-blank on, you can set the image width and height via the img-width and img-height props on and have these values automatically applied to each carousel-slide image. When using images in each slide, ensure they all have the same dimensions (or aspect ratio). As such, you may need to use additional utilities or custom styles to appropriately size content. SizingĬarousels don't automatically normalize slide dimensions. Please be aware that nested carousels are not supported. ![]() Suspendisse eros felis, tinciduntĪ tincidunt eget, convallis vel est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |