';
// Add each slide to the main slider
foreach ($images as $index => $image) {
$image_url = '';
if (isset($image['id']) && !empty($image['id'])) {
$image_url = wp_get_attachment_image_url($image['id'], 'full');
}
if (empty($image_url) && isset($image['url'])) {
$image_url = $image['url'];
}
if (!empty($image_url)) {
$output .= '
';
}
}
$output .= '
'; // End main slider
// Side content (20% width) - next slide + indicators
$output .= '
';
// Next slide preview with fixed arrow overlay
$output .= '
';
// Add each slide to the next slider (will only show one at a time) - always show next image
foreach ($images as $index => $image) {
$image_url = '';
$next_index = ($index + 1) % count($images); // Get the next image index with wrapping
$next_image = $images[$next_index];
if (isset($next_image['id']) && !empty($next_image['id'])) {
$image_url = wp_get_attachment_image_url($next_image['id'], 'full');
}
if (empty($image_url) && isset($next_image['url'])) {
$image_url = $next_image['url'];
}
if (!empty($image_url)) {
$output .= '
';
}
}
$output .= '
'; // End next slider
// Add fixed arrow overlay that stays in place
$output .= '
';
$output .= '
'; // End next-outer container
// Indicators (numbers)
$output .= '
';
// Max indicators to show individual numbers for
$max_indicators = 7;
// Show individual numbered indicators up to the max
for ($i = 0; $i < min(count($images), $max_indicators); $i++) {
$number = str_pad($i + 1, 2, '0', STR_PAD_LEFT);
$output .= '
' . $number . '
';
}
// If more than max indicators, add "»" at the end
if (count($images) > $max_indicators) {
$output .= '
»
';
}
$output .= '
'; // End indicators
$output .= '
'; // End side content
// Mobile navigation (only visible on small screens)
$output .= '