Fullwidth Image Slider Code

<div class="slider-container">
    <div class="slider-wrapper">
        <?php foreach ($items as $index => $item): ?>
            <?php if (!empty($item['image'])): 
                $image_url = wp_get_attachment_image_src(trim($item['image']), 'full'); ?>
                <div class="slide <?php echo $index === 0 ? 'active' : ''; ?>">
                    <img src="<?php echo esc_url($image_url[0]); ?>" alt="" />
                    <div class="content-slide">
                        <div class="content-inner">
                            <?php echo wp_kses_post($item['content']); ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        <?php endforeach; ?>
    </div>

    <!-- Arrows -->
    <div class="slider-controls">
        <button class="arrow prev">❮</button>
        <button class="arrow next">❯</button>
    </div>
</div>

<!-- Tabs -->
<div class="slider-tabs">
    <?php foreach ($items as $index => $item): ?>
        <button class="tab <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo $index; ?>">
            <?php echo wp_kses_post($item['tab']); ?>
        </button>
    <?php endforeach; ?>
</div>

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Ensure that overflow is hidden */
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease; /* Add smooth transition for sliding */
}

.slide {
    min-width: 100%; /* Make each slide take the full width */
    position: relative;
}

.slide img {
    width: 100%; /* Make image full width */
    display: block; /* Remove gap below image */
}

.content-slide {
    position: absolute;
    bottom: 20px; /* Adjust this value as needed */
    left: 20px; /* Adjust this value as needed */
    right: 20px; /* Adjust this value as needed */
    background: rgba(0, 0, 0, 0.5); /* Optional: Semi-transparent background */
    color: white; /* Text color */
    padding: 10px; /* Optional: Padding */
}

.slider-controls {
    position: absolute;
    top: 50%; /* Position controls vertically centered */
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%); /* Adjust for centering */
}

.slider-tabs {
    display: flex;
    justify-content: center; /* Center tabs below the slider */
    margin-top: 20px; /* Space between slider and tabs */
}

.tab {
    background: none; /* Reset default button styles */
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    margin: 0 5px;
}

.tab.active {
    font-weight: bold; /* Highlight active tab */
}

document.addEventListener('DOMContentLoaded', function () {
    const slides = document.querySelectorAll('.slide');
    const tabs = document.querySelectorAll('.tab');
    const prevButton = document.querySelector('.prev');
    const nextButton = document.querySelector('.next');
    let currentIndex = 0;

    function updateSlider(index) {
        slides.forEach((slide, i) => {
            slide.classList.toggle('active', i === index);
        });
        tabs.forEach((tab, i) => {
            tab.classList.toggle('active', i === index);
        });
        const offset = -index * 100; // For sliding effect
        document.querySelector('.slider-wrapper').style.transform = `translateX(${offset}%)`;
    }

    tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            currentIndex = index;
            updateSlider(currentIndex);
        });
    });

    prevButton.addEventListener('click', () => {
        currentIndex = (currentIndex > 0) ? currentIndex - 1 : slides.length - 1;
        updateSlider(currentIndex);
    });

    nextButton.addEventListener('click', () => {
        currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
        updateSlider(currentIndex);
    });
});