comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bootstrap: home carousel jQuery plugin -> react-bootstrap <Carousel>

Browse source 
Second (last) jQuery/BS4 JS blocker to the BS5 CSS swap. Replaces the
`bootstrap-carousel-swipe` jQuery plugin + `$(...).carousel()` init with
react-bootstrap's <Carousel> (native swipe, no jQuery) for both home carousels.

- Preserves the progressive `.lazy` background mechanism (blur -> full image on
  slide-in): the old `slide.bs.carousel` handler becomes <Carousel onSlide>,
  which marks the incoming index in component state.
- Keeps all per-slide class hooks (carousel-item-N, carousel-snd-item-N).
- CSS ports in Index-custom.scss for react-bootstrap's BS5 markup: indicators
  render as <button> (not <li>), and prev/next labels use .visually-hidden
  (BS4 had .sr-only) -> add a shim so labels stay hidden on current BS4 CSS.
- Drops the now-unused bootstrap-carousel-swipe dependency.

Full-app build boots clean. Needs a visual staging check of the home page.
This commit is contained in:
vjrj 2026-07-22 00:13:10 +02:00
parent 8dead27d22
commit f775d4ac26
4 changed files with 121 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

39
imports/ui/pages/Index/Index-custom.scss
View file

@ -40,10 +40,47 @@
height: 40px;
}
// react-bootstrap v2 renders indicators as <button> (BS5 markup), not <li> (BS4),
// so port the base "bar" look here — the BS4 CSS only styles <li>. The last two
// rules are the original custom tweaks.
.carousel-indicators button,
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 5px;
border-radius: 2px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-radius: 2px;
opacity: .5;
transition: opacity .6s ease;
}
.carousel-indicators .active {
opacity: 1;
}
// BS5 renames BS4's `.sr-only` to `.visually-hidden`; react-bootstrap's carousel
// prev/next labels use it. Shim it until the Bootstrap 5 CSS swap lands, else the
// "Anterior"/"Siguiente" labels would render visible over the controls.
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.carousel-snd-caption > h3,