Webart Inhouse

Banner Slider Code

                            <?php

/**
 * Template Part: Banner Slider
 * File: template-pages/template-part/banner.php
 */

// Get the multiple images directly from the clone field
$multiple_images = get_sub_field('multiple_image');

// Generate unique carousel ID to avoid conflicts
$carousel_id = 'carousel-' . uniqid();

// Debug information (remove after testing)
if (current_user_can('manage_options')) {
    echo '<!-- Debug: multiple_images data: ' . print_r($multiple_images, true) . ' -->';
}
if ($multiple_images && is_array($multiple_images)) : ?>
    <div id="<?php echo esc_attr($carousel_id); ?>" class="carousel slide" data-bs-ride="carousel">

        <!-- Carousel Indicators -->
        <?php if (count($multiple_images) > 1) : ?>
            <div class="carousel-indicators">
                <?php foreach ($multiple_images as $index => $slide) : ?>
                    <button type="button"
                        data-bs-target="#<?php echo esc_attr($carousel_id); ?>"
                        data-bs-slide-to="<?php echo $index; ?>"
                        <?php echo $index === 0 ? 'class="active" aria-current="true"' : ''; ?>
                        aria-label="Slide <?php echo $index + 1; ?>">
                    </button>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Carousel Inner -->
        <div class="carousel-inner">
            <?php foreach ($multiple_images as $index => $slide) :
                $image = $slide['image'];
                $heading = $slide['heading'];
                $heading_element = $slide['heading_element'] ?: 'h2';
                $sub_heading = $slide['sub_heading'];
                $sub_heading_element = $slide['sub_heading_element'] ?: 'p';
                $content = $slide['content'];
                $button = $slide['button'];
            ?>

                <div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
                    <?php if ($image && is_array($image)) : ?>
                        <img src="<?php echo esc_url($image['url']); ?>"
                            class="d-block w-100"
                            alt="<?php echo esc_attr($image['alt'] ?: $heading ?: 'Banner slide ' . ($index + 1)); ?>"
                            style="height: 400px; object-fit: cover;">
                    <?php else : ?>
                        <!-- Fallback placeholder if no image -->
                        <div class="placeholder-image d-block w-100 d-flex align-items-center justify-content-center bg-secondary text-white" style="height: 400px;">
                            <span>No Image Available</span>
                        </div>
                    <?php endif; ?>

                    <!-- Carousel Caption -->
                    <?php if ($heading || $sub_heading || $content || $button) : ?>
                        <div class="carousel-caption d-none d-md-block">

                            <!-- Dynamic Heading -->
                            <?php if ($heading) : ?>
                                <<?php echo esc_attr($heading_element); ?> class="banner-heading">
                                    <?php echo esc_html($heading); ?>
                                </<?php echo esc_attr($heading_element); ?>>
                            <?php endif; ?>

                            <!-- Dynamic Sub Heading -->
                            <?php if ($sub_heading) : ?>
                                <<?php echo esc_attr($sub_heading_element); ?> class="banner-sub-heading">
                                    <?php echo esc_html($sub_heading); ?>
                                </<?php echo esc_attr($sub_heading_element); ?>>
                            <?php endif; ?>

                            <!-- Dynamic Content -->
                            <?php if ($content) : ?>
                                <div class="banner-content">
                                    <?php echo wp_kses_post($content); ?>
                                </div>
                            <?php endif; ?>

                            <!-- Dynamic Button -->
                            <?php if ($button && is_array($button)) :
                                $button_link = $button['button'];
                                $button_style = $button['button_style'] ?: 'primary';
                                $button_color = $button['button_color'];

                                if ($button_link && is_array($button_link)) :
                                    $button_url = $button_link['url'];
                                    $button_title = $button_link['title'] ?: 'Read More';
                                    $button_target = $button_link['target'] ?: '_self';

                                    // Prepare button styles
                                    $button_classes = 'btn btn-' . esc_attr($button_style);
                                    $button_inline_styles = '';

                                    if ($button_color) {
                                        $button_inline_styles = 'style="background-color: ' . esc_attr($button_color) . '; border-color: ' . esc_attr($button_color) . ';"';
                                    }
                            ?>
                                    <a href="<?php echo esc_url($button_url); ?>"
                                        class="<?php echo $button_classes; ?>"
                                        target="<?php echo esc_attr($button_target); ?>"
                                        <?php echo $button_inline_styles; ?>>
                                        <?php echo esc_html($button_title); ?>
                                    </a>
                                <?php endif; ?>
                            <?php endif; ?>

                        </div>
                    <?php endif; ?>
                </div>

            <?php endforeach; ?>
        </div>

        <!-- Carousel Controls (only show if more than 1 slide) -->
        <?php if (count($multiple_images) > 1) : ?>
            <button class="carousel-control-prev" type="button" data-bs-target="#<?php echo esc_attr($carousel_id); ?>" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#<?php echo esc_attr($carousel_id); ?>" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        <?php endif; ?>

    </div>
<?php else : ?>
    <!-- Fallback if no images are provided -->
    <?php if (current_user_can('edit_posts')) : ?>

        <div class="alert alert-info">
            <strong>Banner Setup Required:</strong> Please add images to the banner slider in the page editor.
        </div>
    <?php endif; ?>
<?php endif; ?>

Download Code

Create your template file

Create flexible content in SCF field -> Create layout -> Clone Image All Component

Add flexible content parrent loop code

<?php

get_header();

if (have_rows('page_content')) :

while (have_rows('page_content')) : the_row();

$layout = get_row_layout();

if (locate_template('template-pages/template-part/' . $layout . '.php')) {

get_template_part('template-pages/template-part/' . $layout);

} else {

echo '

Layout "' . esc_html($layout) . '" template not found

}

endwhile;

else:

the_content();

endif;

get_footer();

Create layout code with layout name.(Should be name Exact same)

Make your provided HTML dynamic using provided code structure.(Copy from previous tab)

Placeholder content for the second slide.

Some representative placeholder.

Banner Slider Code

Create your template file

Create flexible content in SCF field -> Create layout -> Clone Image All Component

Add flexible content parrent loop code

Create layout code with layout name.(Should be name Exact same)

Slide 1

Slide 2

Size Size

Specifying the height

Banner Slider Code

Create your template file

Create flexible content in SCF field -> Create layout -> Clone Image All Component

Add flexible content parrent loop code

Create layout code with layout name.(Should be name Exact same)

Slide 1

Slide 2

Accordion Item #1

Accordion Item #2

Size Size

Specifying the height