diff --git a/src/Elements/BodyComponents/MjCarousel.php b/src/Elements/BodyComponents/MjCarousel.php
new file mode 100644
index 0000000..bbd1d0e
--- /dev/null
+++ b/src/Elements/BodyComponents/MjCarousel.php
@@ -0,0 +1,114 @@
+>
+ */
+ protected array $allowedAttributes = [
+ 'align' => [
+ 'unit' => 'string',
+ 'type' => 'alignment',
+ 'description' => 'horizontal alignment',
+ 'default_value' => 'center',
+ ],
+ 'border-radius' => [
+ 'unit' => 'px',
+ 'type' => 'string',
+ 'description' => 'border radius',
+ 'default_value' => '',
+ ],
+ 'container-background-color' => [
+ 'unit' => 'color',
+ 'type' => 'color',
+ 'description' => 'column background color',
+ 'default_value' => '',
+ ],
+ 'icon-width' => [
+ 'unit' => 'px',
+ 'type' => 'string',
+ 'description' => 'width of icons',
+ 'default_value' => '44px',
+ ],
+ 'left-icon' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'icon on the left',
+ 'default_value' => 'https://i.imgur.com/xTh3hln.png',
+ ],
+ 'right-icon' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'icon on the right',
+ 'default_value' => 'https://i.imgur.com/os7o9kz.png',
+ ],
+ 'thumbnails' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'display or not thumbnails (visible/hidden)',
+ 'default_value' => 'visible',
+ ],
+ ];
+
+ protected array $defaultAttributes = [
+ 'align' => 'center',
+ 'icon-width' => '44px',
+ 'left-icon' => 'https://i.imgur.com/xTh3hln.png',
+ 'right-icon' => 'https://i.imgur.com/os7o9kz.png',
+ 'thumbnails' => 'visible',
+ ];
+
+ public function render(): string
+ {
+ $divAttributes = $this->getHtmlAttributes([
+ 'style' => 'div',
+ ]);
+
+ $children = $this->getChildren() ?? [];
+ $content = $this->renderChildren($children, []);
+
+ return "
$content
";
+ }
+
+ /**
+ * @return array>
+ */
+ public function getStyles(): array
+ {
+ return [
+ 'div' => [
+ 'text-align' => $this->getAttribute('align'),
+ 'border-radius' => $this->getAttribute('border-radius'),
+ ],
+ ];
+ }
+}
diff --git a/src/Elements/BodyComponents/MjCarouselImage.php b/src/Elements/BodyComponents/MjCarouselImage.php
new file mode 100644
index 0000000..51760eb
--- /dev/null
+++ b/src/Elements/BodyComponents/MjCarouselImage.php
@@ -0,0 +1,109 @@
+>
+ */
+ protected array $allowedAttributes = [
+ 'alt' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'image description',
+ 'default_value' => '',
+ ],
+ 'href' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'link to redirect to on click',
+ 'default_value' => '',
+ ],
+ 'rel' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'specify the rel attribute',
+ 'default_value' => '',
+ ],
+ 'src' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'image source',
+ 'default_value' => '',
+ ],
+ 'target' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'link target on click',
+ 'default_value' => '_blank',
+ ],
+ 'thumbnails-src' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'thumbnail source',
+ 'default_value' => '',
+ ],
+ 'title' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'image title',
+ 'default_value' => '',
+ ],
+ ];
+
+ protected array $defaultAttributes = [
+ 'target' => '_blank',
+ ];
+
+ public function render(): string
+ {
+ $src = $this->getAttribute('src');
+ $alt = $this->getAttribute('alt');
+ $href = $this->getAttribute('href');
+ $target = $this->getAttribute('target');
+
+ $imgTag = "
";
+
+ if ($href) {
+ return "$imgTag";
+ }
+
+ return $imgTag;
+ }
+
+ /**
+ * @return array>
+ */
+ public function getStyles(): array
+ {
+ return [];
+ }
+}
diff --git a/tests/Unit/Elements/BodyComponents/MjCarouselTest.php b/tests/Unit/Elements/BodyComponents/MjCarouselTest.php
new file mode 100644
index 0000000..a29ad59
--- /dev/null
+++ b/tests/Unit/Elements/BodyComponents/MjCarouselTest.php
@@ -0,0 +1,50 @@
+getTagName())->toBe('mj-carousel');
+ });
+
+ it('has correct default attributes', function () {
+ $element = new MjCarousel();
+ expect($element->getAttribute('align'))->toBe('center');
+ expect($element->getAttribute('thumbnails'))->toBe('visible');
+ });
+
+ it('renders correctly', function () {
+ $element = new MjCarousel();
+ $out = $element->render();
+ expect($out)->toContain('getTagName())->toBe('mj-carousel-image');
+ });
+
+ it('renders image correctly', function () {
+ $element = new MjCarouselImage(['src' => 'test.jpg', 'alt' => 'Test']);
+ $out = $element->render();
+ expect($out)->toContain('
![]()
toContain('test.jpg');
+ expect($out)->toContain('Test');
+ });
+
+ it('renders with link when href is provided', function () {
+ $element = new MjCarouselImage([
+ 'src' => 'test.jpg',
+ 'href' => 'https://example.com',
+ ]);
+ $out = $element->render();
+ expect($out)->toContain('