Developer Guide

Developer Guide

Plugin Structure

elementor-container-carousel/
├── elementor-container-carousel.php   # Main plugin file, constants, autoloader
├── src/
│   ├── Core/
│   │   └── Plugin.php                # Singleton controller
│   └── Elementor/
│       ├── Elementor_Integration.php # Widget + asset registration
│       └── Widgets/
│           ├── Container_Carousel_Widget.php
│           └── Slides_Carousel_Widget.php
└── assets/
    ├── css/
    │   ├── carousel.min.css          # Plugin styles
    │   └── swiper-bundle.min.css     # Swiper library
    └── js/
        ├── carousel.min.js           # Plugin JS (vanilla)
        └── swiper-bundle.min.js      # Swiper library

Constants

Constant	Description
ECC_VERSION	Current plugin version (e.g., 1.0.0)
ECC_FILE	Absolute path to main plugin file
ECC_DIR	Plugin directory path (with trailing slash)
ECC_URL	Plugin URL (with trailing slash)
ECC_BASENAME	Plugin basename for WordPress

Namespace

All classes use the Elementor_Container_Carousel namespace with PSR-4 autoloading:

Elementor_Container_Carousel\Core\Plugin
Elementor_Container_Carousel\Elementor\Elementor_Integration
Elementor_Container_Carousel\Elementor\Widgets\Container_Carousel_Widget
Elementor_Container_Carousel\Elementor\Widgets\Slides_Carousel_Widget

Accessing the Plugin Instance

$plugin = \Elementor_Container_Carousel\Core\Plugin::get_instance();

Widget Category

Widgets are registered under the yosh-tools Elementor category:

$elements_manager->add_category('yosh-tools', [
    'title' => __('Yosh Tools', 'elementor-container-carousel'),
    'icon'  => 'fa fa-plug',
]);

Swiper Configuration

Swiper config is generated server-side as a JSON object stored in the data-swiper attribute on the carousel container. The JavaScript reads this config and initializes Swiper.

Example data-swiper output:

{
    "slidesPerView": 3,
    "spaceBetween": 20,
    "loop": true,
    "speed": 300,
    "navigation": {
        "nextEl": ".ecc-nav-next-abc123",
        "prevEl": ".ecc-nav-prev-abc123"
    },
    "pagination": {
        "el": ".ecc-pagination-abc123",
        "type": "bullets",
        "clickable": true
    },
    "breakpoints": {
        "767": { "slidesPerView": 1 },
        "1024": { "slidesPerView": 2 }
    }
}

Asset Handles

Handle	Type	Dependencies
ecc-swiper	Style	-
ecc-carousel	Style	ecc-swiper
ecc-swiper	Script	-
ecc-carousel	Script	ecc-swiper

JavaScript API

The carousel exposes a global ECC object:

// Initialize all carousels
ECC.init();

Each Swiper instance is accessible via window.Swiper after initialization.

Text Domain

elementor-container-carousel — all translatable strings use this text domain.