BrightLeaf Digital Code Snippet Library

GOAL

Creates a responsive image carousel with navigation arrows, dots, touch/swipe support, and modal lightbox for full-size image viewing. Accepts image URLs or img tags as content.

CONFIGURATION

Optional: Override default styles by targeting class names in theme CSS
Optional: Customize arrow symbols, colors, transitions

USAGE

Method 1 (URLs)

[image_carousel]
https://example.com/image1.jpg
https://example.com/image2.jpg
https://example.com/image3.jpg
[/image_carousel]

Method 2 (IMG tags)

[image_carousel]
<img src="https://example.com/image1.jpg" alt="Description" />
<img src="https://example.com/image2.jpg" alt="Description" />
[/image_carousel]

NOTES

First slide displays by default
Swipe requires 50px minimum movement to trigger
Modal displays same image in larger size
Click outside modal to close
CSS uses transform for smooth animations

https://raw.githubusercontent.com/Eitan-brightleaf/snippets/main/Image%20Carousel%20Shortcode%20with%20Modal%20Lightbox.php