rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity
752b001b0a
Bootstrap/js/tests/visual/carousel.html

71 lines
3.1 KiB
HTML
Raw Normal View History

Switch to lowercase `doctype`. (#24217) Having it uppercase doesn't offer anything and the lowercase version slightly improves gzip compression.
2017-10-03 18:34:59 +02:00
<!doctype html>
Tighten htmllint's rules. (#24471)
2017-10-22 14:02:24 +02:00
<html lang="en">
Update visual tests.
2016-11-12 16:12:58 +01:00
<head>
<meta charset="utf-8">
Remove the now unneeded `shrink-to-fit` directive. (#28314)
2019-02-27 16:47:41 +01:00
<meta name="viewport" content="width=device-width, initial-scale=1">
Move `href` attribute first (#31835)
2020-10-22 08:38:15 +02:00
<link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
Update visual tests.
2016-11-12 16:12:58 +01:00
<title>Carousel</title>
Fix carousel transition duration (#25218)
2018-02-19 10:10:25 +01:00
<style>
.carousel-item {
transition: transform 2s ease, opacity .5s ease;
}
</style>
Update visual tests.
2016-11-12 16:12:58 +01:00
</head>
<body>
<div class="container">
<h1>Carousel <small>Bootstrap Visual Test</small></h1>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
Fix carousel transition duration (#25218)
2018-02-19 10:10:25 +01:00
<p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<div id="carousel-example-generic" class="carousel slide" data-bs-ride="carousel">
Make carousel indicators actual buttons
2021-01-03 12:06:58 +01:00
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
Remove inappropriate role="listbox" from carousels
2017-04-11 12:12:30 +02:00
<div class="carousel-inner">
Update visual tests.
2016-11-12 16:12:58 +01:00
<div class="carousel-item active">
Normalize all links. (#24109) * use a trailing slash when possible * use https when possible * remove a few redirected links * consistently use `https://popper.js.org/` * fix `iconUrl` in nuget files * change Jekyll Windows guide to the official one
2017-09-26 14:24:14 +02:00
<img src="https://i.imgur.com/iEZgY7Y.jpg" alt="First slide">
Update visual tests.
2016-11-12 16:12:58 +01:00
</div>
<div class="carousel-item">
Normalize all links. (#24109) * use a trailing slash when possible * use https when possible * remove a few redirected links * consistently use `https://popper.js.org/` * fix `iconUrl` in nuget files * change Jekyll Windows guide to the official one
2017-09-26 14:24:14 +02:00
<img src="https://i.imgur.com/eNWn1Xs.jpg" alt="Second slide">
Update visual tests.
2016-11-12 16:12:58 +01:00
</div>
<div class="carousel-item">
Normalize all links. (#24109) * use a trailing slash when possible * use https when possible * remove a few redirected links * consistently use `https://popper.js.org/` * fix `iconUrl` in nuget files * change Jekyll Windows guide to the official one
2017-09-26 14:24:14 +02:00
<img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide">
Update visual tests.
2016-11-12 16:12:58 +01:00
</div>
</div>
Carousel: use buttons, not links, for prev/next controls (#32627) * Carousel: use buttons, not links, for prev/next - expand the styles to neutralise border/background - change docs page - add extra unit test to check that links or buttons work as controls - modify visual test to use buttons as well - use buttons instead of links for prev/next - remove `role="button"` from links that are actually links * Clarify that controls can be button or link * Update site/content/docs/5.0/components/carousel.md Co-authored-by: Mark Otto <markd.otto@gmail.com> * Explicitly set padding to 0 to prevent dipping/moving on active in Firefox Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-01-27 16:31:16 +01:00
<button class="carousel-control-prev" data-bs-target="#carousel-example-generic" type="button" data-bs-slide="prev">
Update visual test carousel
2016-12-30 11:29:47 +01:00
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
Rename `sr-only`/`sr-only-focusable` (#31139) * Rename `sr-only`/`sr-only-focusable` To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133 Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 13:38:11 +02:00
<span class="visually-hidden">Previous</span>
Carousel: use buttons, not links, for prev/next controls (#32627) * Carousel: use buttons, not links, for prev/next - expand the styles to neutralise border/background - change docs page - add extra unit test to check that links or buttons work as controls - modify visual test to use buttons as well - use buttons instead of links for prev/next - remove `role="button"` from links that are actually links * Clarify that controls can be button or link * Update site/content/docs/5.0/components/carousel.md Co-authored-by: Mark Otto <markd.otto@gmail.com> * Explicitly set padding to 0 to prevent dipping/moving on active in Firefox Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-01-27 16:31:16 +01:00
</button>
<button class="carousel-control-next" data-bs-target="#carousel-example-generic" type="button" data-bs-slide="next">
Update visual test carousel
2016-12-30 11:29:47 +01:00
<span class="carousel-control-next-icon" aria-hidden="true"></span>
Rename `sr-only`/`sr-only-focusable` (#31139) * Rename `sr-only`/`sr-only-focusable` To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133 Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 13:38:11 +02:00
<span class="visually-hidden">Next</span>
Carousel: use buttons, not links, for prev/next controls (#32627) * Carousel: use buttons, not links, for prev/next - expand the styles to neutralise border/background - change docs page - add extra unit test to check that links or buttons work as controls - modify visual test to use buttons as well - use buttons instead of links for prev/next - remove `role="button"` from links that are actually links * Clarify that controls can be button or link * Update site/content/docs/5.0/components/carousel.md Co-authored-by: Mark Otto <markd.otto@gmail.com> * Explicitly set padding to 0 to prevent dipping/moving on active in Firefox Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-01-27 16:31:16 +01:00
</button>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
</div>
</div>
Rename `eventHandler` and `selectorEngine` files.
2019-05-08 15:11:24 +02:00
<script src="../../dist/dom/event-handler.js"></script>
<script src="../../dist/dom/selector-engine.js"></script>
fix remove files in our visual tests
2019-03-17 12:07:26 +01:00
<script src="../../dist/dom/manipulator.js"></script>
Rewrite carousel without jquery
2017-08-24 22:22:02 +02:00
<script src="../../dist/dom/data.js"></script>
visual tests: add missing base-component dist file (#33167) Regression of #32313
2021-02-22 07:42:43 +01:00
<script src="../../dist/base-component.js"></script>
Update visual tests.
2016-11-12 16:12:58 +01:00
<script src="../../dist/carousel.js"></script>
<script>
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
var t0
var t1
var carousel = document.getElementById('carousel-example-generic')
Fix carousel transition duration (#25218)
2018-02-19 10:10:25 +01:00
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
// Test to show that the carousel doesn't slide when the current tab isn't visible
// Test to show that transition-duration can be changed with css
carousel.addEventListener('slid.bs.carousel', function (event) {
t1 = performance.now()
console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
})
carousel.addEventListener('slide.bs.carousel', function () {
t0 = performance.now()
Update visual tests.
2016-11-12 16:12:58 +01:00
})
</script>
</body>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
</html>
Reference in New Issue Copy Permalink