Untitled

<?php
// Array of carousel items with type defining the layout (image-content, content-only)
$carousels = [
    ['type' => 'image-content', 'image' => 'image1.jpg', 'content' => 'Content for carousel 1'],
    ['type' => 'content-only', 'image' => '', 'content' => 'Content for carousel 2'],
    ['type' => 'image-content', 'image' => 'image3.jpg', 'content' => 'Content for carousel 3'],
];

// Default settings if needed
$default_case = 'image-content'; // Can be 'image-content', 'content-only'

// Function to render the carousel item based on type
function render_carousel_item($carousel, $default_case) {
    $type = $carousel['type'] ?? $default_case; // Use default case if type is not set
    $image = $carousel['image'] ?? '';
    $content = $carousel['content'] ?? '';

    // Start carousel item container
    echo '<div class="carousel-item">';
    
    if ($type === 'image-content' && $image) {
        // Image on the left, content on the right
        echo '<div class="carousel-left">';
        echo '<img src="' . $image . '" alt="Carousel Image">';
        echo '</div>';
        echo '<div class="carousel-right">';
        echo '<p>' . $content . '</p>';
        echo '</div>';
    } elseif ($type === 'content-only') {
        // Expand content to cover the whole carousel area
        echo '<div class="carousel-full-content">';
        echo '<p>' . $content . '</p>';
        echo '</div>';
    } else {
        // Handle default case (image-content layout)
        if ($image) {
            echo '<div class="carousel-left">';
            echo '<img src="' . $image . '" alt="Carousel Image">';
            echo '</div>';
        }
        echo '<div class="carousel-right">';
        echo '<p>' . $content . '</p>';
        echo '</div>';
    }
    
    // End carousel item container
    echo '</div>';
}

// Begin carousel structure
echo '<div class="carousel-container">';
echo '<div class="carousel-items-wrapper">';

// Loop through each carousel and render
foreach ($carousels as $carousel) {
    render_carousel_item($carousel, $default_case);
}

echo '</div>';

// Add navigation buttons
echo '<button class="carousel-control prev">←</button>';
echo '<button class="carousel-control next">→</button>';

echo '</div>'; // End carousel-container
?>

<style>
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-items-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    display: none;
    justify-content: space-between;
    width: 100%;
}

.carousel-left {
    width: 40%;
}

.carousel-left img {
    width: 100%;
    height: auto;
}

.carousel-right, .carousel-full-content {
    width: 100%;
    padding: 20px;
    background-color: #f0f0f0;
}

.carousel-right {
    width: 60%;
}

.carousel-full-content {
    width: 100%;
}

/* Navigation buttons */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}
</style>

<script>
// Basic JavaScript to handle carousel navigation
document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('.carousel-item');
    const nextButton = document.querySelector('.carousel-control.next');
    const prevButton = document.querySelector('.carousel-control.prev');
    let currentIndex = 0;

    function updateCarousel() {
        items.forEach((item, index) => {
            item.style.display = index === currentIndex ? 'flex' : 'none';
        });
    }

    nextButton.addEventListener('click', function() {
        currentIndex = (currentIndex + 1) % items.length; // Move to next item
        updateCarousel();
    });

    prevButton.addEventListener('click', function() {
        currentIndex = (currentIndex - 1 + items.length) % items.length; // Move to previous item
        updateCarousel();
    });

    // Initialize carousel
    updateCarousel();
});
</script>