WPIntell

Source evidence

How make slide title boxes consistent?

Splide Carousel Block · support · 2024-07-30T16:07:00+00:00

complaintsentiment
mediumseverity
0.92relevance
4replies
Evidence linked to opportunitycommercial context

Proof Health

Open evidence

Commercial opportunities need traceable source links before they are treated as build-worthy.

4 / 26 rows with source links

15.4% of this page's analysis has direct source links.

0 build-decision rows missing links

0 rows here require auditable proof before promotion.

22 rows with no attached evidence

0 rows have source counts but still need direct links.

Conversation

support
okieman unresolved
I was called in to help with a site that is mostly built. Our carousel needs to have a semi-transparent blue box along the bottom portion of the slide photo, with left-aligned reverse/white text, and two action buttons to the right. It’s mostly done except for three things: 1-The blue box only bottom-aligns in the first slide. The others have a gap at the bottom. When I go into the FSE, I can only see the first slide. 2-Each slide seems to have its own version of the blue box and contents. I wish this box and contents would stay in place while the images underneath continued to slide past. 3-The entire carousel does not scale down on mobile devices like a phone (vertical). I haven’t yet added a link because I have to get permission at a meeting today 7/30 at 2pm CST. Are you able to paste the CSS you are using to try and accomplish this? Based on your description, I would probably do the following: Add an image block inside each slide, and a “Row” (Group) block below. In the Row block, add your blue background color, and inside add your text and buttons to the right (set justification space between) Add a CSS class to the Row block, e.g. .slide-content Add custom CSS for the .slide-content Row, something like the following: .slide-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; } You may need to make the .splide__slide position: relative. This will put the blue Row at the bottom of each slide. If you do not want the blue Row to be repeated for each slide, or live outside the carousel, you could position it below the carousel block and then use CSS to offset it to overlay on top of the carousel. The plugin does include basic options for responsiveness if you are using the slides per page feature, but more advanced features you will need to toggle the “Advanced” tab panel on the Carousel block itself, which will expose a field where you can paste in custom Splide JSON options, specifically breakpoint options: https://splidejs.com/guides/options/#breakpoints Hope this helps, and if you are able to share the link later that would also help 🙂 That’s interesting. I have the meeting coming up, and will come back here afterwards… @dkjensen sorry for the delay. We decided most of our problems on this site are probably due to damage to files during or shortly after the original theme install. Once we get that cleared up, I can come back to work on tweaking the carousel appearance. @okieman No problem!

Comments

4 shown
David Jensen 2024-07-30T16:16:00+00:00

Are you able to paste the CSS you are using to try and accomplish this? Based on your description, I would probably do the following: Add an image block inside each slide, and a “Row” (Group) block below. In the Row block, add your blue background color, and inside add your text and buttons to the right (set justification space between) Add a CSS class to the Row block, e.g. .slide-content Add custom CSS for the .slide-content Row, something like the following: .slide-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; } You may need to make the .splide__slide position: relative. This will put the blue Row at the bottom of each slide. If you do not want the blue Row to be repeated for each slide, or live outside the carousel, you could position it below the carousel block and then use CSS to offset it to overlay on top of the carousel. The plugin does include basic options for responsiveness if you are using the slides per page feature, but more advanced features you will need to toggle the “Advanced” tab panel on the Carousel block itself, which will expose a field where you can paste in custom Splide JSON options, specifically breakpoint options: https://splidejs.com/guides/options/#breakpoints Hope this helps, and if you are able to share the link later that would also help 🙂

okieman 2024-07-30T18:17:00+00:00

That’s interesting. I have the meeting coming up, and will come back here afterwards…

okieman 2024-07-31T01:28:00+00:00

@dkjensen sorry for the delay. We decided most of our problems on this site are probably due to damage to files during or shortly after the original theme install. Once we get that cleared up, I can come back to work on tweaking the carousel appearance.

David Jensen 2024-07-31T09:30:00+00:00

@okieman No problem!