mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Add v4.5.1 docs (#31409)

Browse Source
This commit is contained in:
XhmikosR
2020-08-04 19:36:55 +03:00
committed by GitHub
parent 3f76a6fcd2
commit 891f87bb54
118 changed files with 2674 additions and 2372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/4.5/components/carousel/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/carousel/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -504,7 +505,10 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Carousel</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/carousel.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<h1 class="bd-title" id="content">Carousel</h1>
</div>
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
@@ -515,22 +519,22 @@
<p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API</a> 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.).</p>
<div class="bd-callout bd-callout-info">
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
</div>
<p>Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.</p>
<p>Lastly, if you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
<p>Lastly, if you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</p>
<h2 id="example">Example</h2>
<p>Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.</p>
<p><strong>The <code class="highlighter-rouge">.active</code> class needs to be added to one of the slides</strong> otherwise the carousel will not be visible. Also be sure to set a unique id on the <code class="highlighter-rouge">.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a <code class="highlighter-rouge">data-target</code> attribute (or <code class="highlighter-rouge">href</code> for links) that matches the id of the <code class="highlighter-rouge">.carousel</code> element.</p>
<p><strong>The <code class="language-plaintext highlighter-rouge">.active</code> class needs to be added to one of the slides</strong> otherwise the carousel will not be visible. Also be sure to set a unique id on the <code class="language-plaintext highlighter-rouge">.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a <code class="language-plaintext highlighter-rouge">data-target</code> attribute (or <code class="language-plaintext highlighter-rouge">href</code> for links) that matches the id of the <code class="language-plaintext highlighter-rouge">.carousel</code> element.</p>
<h3 id="slides-only">Slides only</h3>
<p>Here’s a carousel with slides only. Note the presence of the <code class="highlighter-rouge">.d-block</code> and <code class="highlighter-rouge">.w-100</code> on carousel images to prevent browser default image alignment.</p>
<p>Here’s a carousel with slides only. Note the presence of the <code class="language-plaintext highlighter-rouge">.d-block</code> and <code class="language-plaintext highlighter-rouge">.w-100</code> on carousel images to prevent browser default image alignment.</p>
<div class="bd-example">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
@@ -671,7 +675,7 @@
<h3 id="with-captions">With captions</h3>
<p>Add captions to your slides easily with the <code class="highlighter-rouge">.carousel-caption</code> element within any <code class="highlighter-rouge">.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="/docs/4.5/utilities/display/">display utilities</a>. We hide them initially with <code class="highlighter-rouge">.d-none</code> and bring them back on medium-sized devices with <code class="highlighter-rouge">.d-md-block</code>.</p>
<p>Add captions to your slides easily with the <code class="language-plaintext highlighter-rouge">.carousel-caption</code> element within any <code class="language-plaintext highlighter-rouge">.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="/docs/4.5/utilities/display/">display utilities</a>. We hide them initially with <code class="language-plaintext highlighter-rouge">.d-none</code> and bring them back on medium-sized devices with <code class="language-plaintext highlighter-rouge">.d-md-block</code>.</p>
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
@@ -754,7 +758,7 @@
<h3 id="crossfade">Crossfade</h3>
<p>Add <code class="highlighter-rouge">.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
<div class="bd-example">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
@@ -801,9 +805,9 @@
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="individual-carousel-item-interval">Individual <code class="highlighter-rouge">.carousel-item</code> interval</h3>
<h3 id="individual-carousel-item-interval">Individual <code class="language-plaintext highlighter-rouge">.carousel-item</code> interval</h3>
<p>Add <code class="highlighter-rouge">data-interval=""</code> to a <code class="highlighter-rouge">.carousel-item</code> to change the amount of time to delay between automatically cycling to the next item.</p>
<p>Add <code class="language-plaintext highlighter-rouge">data-interval=""</code> to a <code class="language-plaintext highlighter-rouge">.carousel-item</code> to change the amount of time to delay between automatically cycling to the next item.</p>
<div class="bd-example">
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
@@ -854,9 +858,9 @@
<h3 id="via-data-attributes">Via data attributes</h3>
<p>Use data attributes to easily control the position of the carousel. <code class="highlighter-rouge">data-slide</code> accepts the keywords <code class="highlighter-rouge">prev</code> or <code class="highlighter-rouge">next</code>, which alters the slide position relative to its current position. Alternatively, use <code class="highlighter-rouge">data-slide-to</code> to pass a raw slide index to the carousel <code class="highlighter-rouge">data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code class="highlighter-rouge">0</code>.</p>
<p>Use data attributes to easily control the position of the carousel. <code class="language-plaintext highlighter-rouge">data-slide</code> accepts the keywords <code class="language-plaintext highlighter-rouge">prev</code> or <code class="language-plaintext highlighter-rouge">next</code>, which alters the slide position relative to its current position. Alternatively, use <code class="language-plaintext highlighter-rouge">data-slide-to</code> to pass a raw slide index to the carousel <code class="language-plaintext highlighter-rouge">data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code class="language-plaintext highlighter-rouge">0</code>.</p>
<p>The <code class="highlighter-rouge">data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. If you don’t use <code class="highlighter-rouge">data-ride="carousel"</code> to initialize your carousel, you have to initialize it yourself. <strong>It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
<p>The <code class="language-plaintext highlighter-rouge">data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. If you don’t use <code class="language-plaintext highlighter-rouge">data-ride="carousel"</code> to initialize your carousel, you have to initialize it yourself. <strong>It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
<h3 id="via-javascript">Via JavaScript</h3>
@@ -866,7 +870,7 @@
<h3 id="options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-interval=""</code>.</p>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-interval=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
@@ -928,35 +932,35 @@
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
</div>
<h4 id="carouseloptions"><code class="highlighter-rouge">.carousel(options)</code></h4>
<h4 id="carouseloptions"><code class="language-plaintext highlighter-rouge">.carousel(options)</code></h4>
<p>Initializes the carousel with an optional options <code class="highlighter-rouge">object</code> and starts cycling through items.</p>
<p>Initializes the carousel with an optional options <code class="language-plaintext highlighter-rouge">object</code> and starts cycling through items.</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.carousel</span><span class="dl">'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">({</span>
<span class="na">interval</span><span class="p">:</span> <span class="mi">2000</span>
<span class="p">})</span></code></pre></figure>
<h4 id="carouselcycle"><code class="highlighter-rouge">.carousel('cycle')</code></h4>
<h4 id="carouselcycle"><code class="language-plaintext highlighter-rouge">.carousel('cycle')</code></h4>
<p>Cycles through the carousel items from left to right.</p>
<h4 id="carouselpause"><code class="highlighter-rouge">.carousel('pause')</code></h4>
<h4 id="carouselpause"><code class="language-plaintext highlighter-rouge">.carousel('pause')</code></h4>
<p>Stops the carousel from cycling through items.</p>
<h4 id="carouselnumber"><code class="highlighter-rouge">.carousel(number)</code></h4>
<h4 id="carouselnumber"><code class="language-plaintext highlighter-rouge">.carousel(number)</code></h4>
<p>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<p>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<h4 id="carouselprev"><code class="highlighter-rouge">.carousel('prev')</code></h4>
<h4 id="carouselprev"><code class="language-plaintext highlighter-rouge">.carousel('prev')</code></h4>
<p>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<p>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<h4 id="carouselnext"><code class="highlighter-rouge">.carousel('next')</code></h4>
<h4 id="carouselnext"><code class="language-plaintext highlighter-rouge">.carousel('next')</code></h4>
<p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<h4 id="carouseldispose"><code class="highlighter-rouge">.carousel('dispose')</code></h4>
<h4 id="carouseldispose"><code class="language-plaintext highlighter-rouge">.carousel('dispose')</code></h4>
<p>Destroys an element’s carousel.</p>
@@ -965,13 +969,13 @@
<p>Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:</p>
<ul>
<li><code class="highlighter-rouge">direction</code>: The direction in which the carousel is sliding (either <code class="highlighter-rouge">"left"</code> or <code class="highlighter-rouge">"right"</code>).</li>
<li><code class="highlighter-rouge">relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
<li><code class="highlighter-rouge">from</code>: The index of the current item</li>
<li><code class="highlighter-rouge">to</code>: The index of the next item</li>
<li><code class="language-plaintext highlighter-rouge">direction</code>: The direction in which the carousel is sliding (either <code class="language-plaintext highlighter-rouge">"left"</code> or <code class="language-plaintext highlighter-rouge">"right"</code>).</li>
<li><code class="language-plaintext highlighter-rouge">relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
<li><code class="language-plaintext highlighter-rouge">from</code>: The index of the current item</li>
<li><code class="language-plaintext highlighter-rouge">to</code>: The index of the next item</li>
</ul>
<p>All carousel events are fired at the carousel itself (i.e. at the <code class="highlighter-rouge">&lt;div class="carousel"&gt;</code>).</p>
<p>All carousel events are fired at the carousel itself (i.e. at the <code class="language-plaintext highlighter-rouge">&lt;div class="carousel"&gt;</code>).</p>
<table class="table table-bordered table-striped">
<thead>
@@ -998,13 +1002,13 @@
<h3 id="change-transition-duration">Change transition duration</h3>
<p>The transition duration of <code class="highlighter-rouge">.carousel-item</code> can be changed with the <code class="highlighter-rouge">$carousel-transition</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code class="highlighter-rouge">transition: transform 2s ease, opacity .5s ease-out</code>).</p>
<p>The transition duration of <code class="language-plaintext highlighter-rouge">.carousel-item</code> can be changed with the <code class="language-plaintext highlighter-rouge">$carousel-transition</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code class="language-plaintext highlighter-rouge">transition: transform 2s ease, opacity .5s ease-out</code>).</p>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>