maraid-carousel

This duplicates the RBGE image carousel using Slick. Keyboard navigation should work, and arrow keys/swipe to navigate.

Captions are added in data-caption attributes on the slide element and are optional - if there are no captions set the info button won't appear, if you navigate to a slide with no caption the button will be disabled and faded out.

Colours etc are easily changed per project in _carousel.css in variables near the top.

Icons are set in the JS itself (carousel.js) so that we can inline them and change colours - but they can be changed.

This will currently only work properly if the content is <img> or <picture> elements that are all the same size. If you use different size images it will do weird stuff. If you need that to behave we could adapt it to use object-fit.

Currently there's no back end to this, but you should be able to set up a WP block or the like to spit out the right markup from a gallery - or shout if you want me to.

Example

<div class="maraid-carousel" aria-live="polite"> <div class="slider"> <div class="slide" data-caption="This could be a picture of anything really."> <img src="https://picsum.photos/1600/900?1" alt="An example image (1)"> </div> <div class="slide" data-caption="I've got no idea. They're random."> <img src="https://picsum.photos/1600/900?2" alt="An example image (2)"> </div> <div class="slide" data-caption="Probably a misty mountain or something."> <img src="https://picsum.photos/1600/900?3" alt="An example image (3)"> </div> <div class="slide" data-caption="I'll not put a caption on the next one as an example of how that works."> <img src="https://picsum.photos/1600/900?4" alt="An example image (4)"> </div> <div class="slide" data-caption=""> <img src="https://picsum.photos/1600/900?5" alt="An example image (5)"> </div> </div> </div>

More options

I've tried to make this work the same as the example from the RBGE site, but I've built in some options so it's a bit more flexible for different projects.

In addition to styling changes mentioned above you can change the behaviour using optional data attributes on the main maraid-carousel element:

• data-loop="true" - slides loop (they don't by default)
• data-hide-numbers="true" - hide slide numbers
• data-slide-transition="true" - use a slide transition instead of the default fade
• data-autoplay-speed="1000" - if set the carousel will transition automatically every 1000ms (pausing on focus or hover)

Here's the same carousel but using all of these:

<div class="maraid-carousel" aria-live="polite" data-loop="true" data-hide-numbers="true" data-slide-transition="true" data-autoplay-speed="1000"> <div class="slider"> <div class="slide" data-caption="This could be a picture of anything really."> <img src="https://picsum.photos/1600/900?1" alt="An example image (1)"> </div> <div class="slide" data-caption="I've got no idea. They're random."> <img src="https://picsum.photos/1600/900?2" alt="An example image (2)"> </div> <div class="slide" data-caption="Probably a misty mountain or something."> <img src="https://picsum.photos/1600/900?3" alt="An example image (3)"> </div> <div class="slide" data-caption="I'll not put a caption on the next one as an example of how that works."> <img src="https://picsum.photos/1600/900?4" alt="An example image (4)"> </div> <div class="slide" data-caption=""> <img src="https://picsum.photos/1600/900?5" alt="An example image (5)"> </div> </div> </div>

Shout if you need anything changed x