jQuery 輪播圖後台可配置：前端生成 HTML + 插件初始化，PHP 輸出數據屬性

需求：頁面多處輪播，單圖/多圖/分組輪播模式可配置。架構：

後台 (PHP) 輸出結構化數據

<div class="carousel" data-mode="group" data-group-size="3" data-items='[{"img":"1.jpg","url":"/a"},{"img":"2.jpg","url":"/b"}]'></div>

前端通用插件

$.fn.carousel = function() {
    return this.each(function() {
        var $el = $(this);
        var mode = $el.data('mode'); // single | multi | group
        var items = $el.data('items');
        // 根據 mode 生成 DOM 結構
        // 單圖：<div><img></div>...
        // 多圖：<ul><li><img></li></ul>
        // 分組：每 N 個包一層 <div class="group">
        // 最後統一調用 $el.find('.carousel-inner').slick()/owlCarousel()/自寫邏輯
    });
};

// 頁面初始化
$('.carousel').carousel();

關鍵優勢

• HTML 結構由 JS 動態生成，後台只需輸出純數據屬性
• 新增模式只擴展 JS 邏輯，無需改動 PHP 模板
• 複用成熟輪播庫 Slick/Owl Carousel/Swiper 保證效果