IMPR: Carousel accesability attributes
This commit is contained in:
parent
c0d4f554ff
commit
11d994ebdd
|
|
@ -1,4 +1,4 @@
|
|||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1627934640574"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><link href="css/app.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="553e7ebe0c796ce32ab6.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
||||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1627939615257"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><link href="css/app.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="553e7ebe0c796ce32ab6.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
||||
]><div class="main-bn alert alert-danger" role="alert">
|
||||
<a
|
||||
href="https://www.google.com/chrome/browser/desktop/"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -70,65 +70,6 @@
|
|||
898
|
||||
]
|
||||
},
|
||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.2.0_webpack@5.48.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@4.0.0/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@12.1.0_node-sass@6.0.1+webpack@5.48.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": [
|
||||
{
|
||||
"chunks": {
|
||||
"byName": {
|
||||
"child": 396
|
||||
},
|
||||
"bySource": {
|
||||
"0 child": 396
|
||||
},
|
||||
"usedIds": [
|
||||
396
|
||||
]
|
||||
},
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.2.0_webpack@5.48.0/node_modules/css-loader/dist/runtime/api.js": 588,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.2.0_webpack@5.48.0/node_modules/css-loader/dist/runtime/getUrl.js": 398,
|
||||
"./node_modules/.pnpm/css-loader@6.2.0_webpack@5.48.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@4.0.0/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@12.1.0_node-sass@6.0.1+webpack@5.48.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": 962,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%272%27 fill=%27%23fff%27/%3e%3c/svg%3e": 204,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2386b7fe%27/%3e%3c/svg%3e": 609,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e": 469,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%280,0,0,0.25%29%27/%3e%3c/svg%3e": 296,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e": 144,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23000%27%3e%3cpath d=%27M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z%27/%3e%3c/svg%3e": 175,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%230c63e4%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e": 740,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23212529%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e": 460,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z%27/%3e%3c/svg%3e": 647,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e": 692,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M2 5l6 6 6-6%27/%3e%3c/svg%3e": 214,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10h8%27/%3e%3c/svg%3e": 931,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10l3 3l6-6%27/%3e%3c/svg%3e": 349,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%280,0,0,0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e": 191,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255,255,255,0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e": 851,
|
||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23198754%27 d=%27M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e": 819
|
||||
},
|
||||
"usedIds": [
|
||||
144,
|
||||
175,
|
||||
191,
|
||||
204,
|
||||
214,
|
||||
296,
|
||||
349,
|
||||
398,
|
||||
460,
|
||||
469,
|
||||
588,
|
||||
609,
|
||||
647,
|
||||
692,
|
||||
740,
|
||||
819,
|
||||
851,
|
||||
931,
|
||||
962
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_8b0464c8bf295490a69e78f11399b5a8/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.1_debug@4.3.2/node_modules/axios/index.js": 163,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
||||
"version": "4.0.6",
|
||||
"version": "4.0.7",
|
||||
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
|
||||
"author": "Tony Air <tony@twma.pro>",
|
||||
"license": "BSD-2-Clause",
|
||||
|
|
|
|||
|
|
@ -2,85 +2,85 @@ import Events from '../_events';
|
|||
import Carousel from 'bootstrap/js/src/carousel';
|
||||
|
||||
const CarouselUI = ((window) => {
|
||||
const NAME = 'js-carousel';
|
||||
const NAME = 'js-carousel';
|
||||
|
||||
const init = () => {
|
||||
console.log(`${NAME}: init`);
|
||||
const init = () => {
|
||||
console.log(`${NAME}: init`);
|
||||
|
||||
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
||||
const carousel = new Carousel(el);
|
||||
// create next/prev arrows
|
||||
if (el.dataset.bsArrows) {
|
||||
const next = document.createElement('button');
|
||||
next.classList.add('carousel-control-next');
|
||||
next.setAttribute('type', 'button');
|
||||
prev.setAttribute('aria-label', 'Next Slide');
|
||||
next.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
next.setAttribute('data-bs-slide', 'next');
|
||||
next.addEventListener('click', (e) => {
|
||||
carousel.next();
|
||||
});
|
||||
next.innerHTML = '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
|
||||
el.appendChild(next);
|
||||
|
||||
const prev = document.createElement('button');
|
||||
prev.setAttribute('type', 'button');
|
||||
prev.setAttribute('aria-label', 'Previous Slide');
|
||||
prev.classList.add('carousel-control-prev');
|
||||
prev.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
prev.setAttribute('data-bs-slide', 'prev');
|
||||
prev.addEventListener('click', (e) => {
|
||||
carousel.prev();
|
||||
});
|
||||
prev.innerHTML = '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
|
||||
el.appendChild(prev);
|
||||
}
|
||||
|
||||
if (el.dataset.bsIndicators) {
|
||||
const indicators = document.createElement('div');
|
||||
indicators.classList.add('carousel-indicators');
|
||||
const items = el.querySelectorAll('.carousel-item');
|
||||
let i = 0;
|
||||
while (i < items.length) {
|
||||
const ind = document.createElement('button');
|
||||
ind.setAttribute('type', 'button');
|
||||
ind.setAttribute('aria-label', 'Slide to #' + (i + 1));
|
||||
if (i == 0) {
|
||||
ind.classList.add('active');
|
||||
}
|
||||
ind.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
ind.setAttribute('data-bs-slide-to', i);
|
||||
|
||||
ind.addEventListener('click', (e) => {
|
||||
const target = e.target;
|
||||
carousel.to(target.getAttribute('data-bs-slide-to'));
|
||||
indicators.querySelectorAll('.active').forEach((ind2) => {
|
||||
ind2.classList.remove('active');
|
||||
});
|
||||
target.classList.add('active');
|
||||
});
|
||||
|
||||
indicators.appendChild(ind);
|
||||
i++;
|
||||
}
|
||||
|
||||
el.appendChild(indicators);
|
||||
el.addEventListener('slide.bs.carousel', (e) => {
|
||||
el.querySelectorAll('.carousel-indicators .active').forEach((ind2) => {
|
||||
ind2.classList.remove('active');
|
||||
});
|
||||
el.querySelectorAll(`.carousel-indicators [data-bs-slide-to="${ e.to }"]`).forEach((ind2) => {
|
||||
ind2.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
el.classList.add(`${NAME}-active`);
|
||||
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
||||
const carousel = new Carousel(el);
|
||||
// create next/prev arrows
|
||||
if (el.dataset.bsArrows) {
|
||||
const next = document.createElement('button');
|
||||
next.classList.add('carousel-control-next');
|
||||
next.setAttribute('type', 'button');
|
||||
prev.setAttribute('aria-label', 'Next Slide');
|
||||
next.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
next.setAttribute('data-bs-slide', 'next');
|
||||
next.addEventListener('click', (e) => {
|
||||
carousel.next();
|
||||
});
|
||||
};
|
||||
next.innerHTML = '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
|
||||
el.appendChild(next);
|
||||
|
||||
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
||||
window.addEventListener(`${Events.AJAX}`, init);
|
||||
const prev = document.createElement('button');
|
||||
prev.setAttribute('type', 'button');
|
||||
prev.setAttribute('aria-label', 'Previous Slide');
|
||||
prev.classList.add('carousel-control-prev');
|
||||
prev.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
prev.setAttribute('data-bs-slide', 'prev');
|
||||
prev.addEventListener('click', (e) => {
|
||||
carousel.prev();
|
||||
});
|
||||
prev.innerHTML = '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
|
||||
el.appendChild(prev);
|
||||
}
|
||||
|
||||
if (el.dataset.bsIndicators) {
|
||||
const indicators = document.createElement('div');
|
||||
indicators.classList.add('carousel-indicators');
|
||||
const items = el.querySelectorAll('.carousel-item');
|
||||
let i = 0;
|
||||
while (i < items.length) {
|
||||
const ind = document.createElement('button');
|
||||
ind.setAttribute('type', 'button');
|
||||
ind.setAttribute('aria-label', `Slide to #${ i + 1}`);
|
||||
if (i == 0) {
|
||||
ind.classList.add('active');
|
||||
}
|
||||
ind.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
ind.setAttribute('data-bs-slide-to', i);
|
||||
|
||||
ind.addEventListener('click', (e) => {
|
||||
const target = e.target;
|
||||
carousel.to(target.getAttribute('data-bs-slide-to'));
|
||||
indicators.querySelectorAll('.active').forEach((ind2) => {
|
||||
ind2.classList.remove('active');
|
||||
});
|
||||
target.classList.add('active');
|
||||
});
|
||||
|
||||
indicators.appendChild(ind);
|
||||
i++;
|
||||
}
|
||||
|
||||
el.appendChild(indicators);
|
||||
el.addEventListener('slide.bs.carousel', (e) => {
|
||||
el.querySelectorAll('.carousel-indicators .active').forEach((ind2) => {
|
||||
ind2.classList.remove('active');
|
||||
});
|
||||
el.querySelectorAll(`.carousel-indicators [data-bs-slide-to="${ e.to }"]`).forEach((ind2) => {
|
||||
ind2.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
el.classList.add(`${NAME}-active`);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
||||
window.addEventListener(`${Events.AJAX}`, init);
|
||||
})(window);
|
||||
|
||||
export default CarouselUI;
|
||||
|
|
|
|||
Loading…
Reference in New Issue