Repository: exadel-inc/esl
Pull request #2476 (2024-06-24 14:08:18)

docs(esl-carousel): esl-carousel demo page (UIP)
Here is a minimalistic version of demo page for ESLCarousel, it's gonna be extended soon in a separate PRs.


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4ff4832f..5c79175c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,17 +1,3 @@
-## [5.0.0-beta.20](https://github.com/exadel-inc/esl/compare/v5.0.0-beta.19...v5.0.0-beta.20) (2024-06-20)
-
-### Bug Fixes
-
-* **deps:** bump @11ty/eleventy-dev-server from 2.0.0 to 2.0.1 ([9211eaf](https://github.com/exadel-inc/esl/commit/9211eaff52c013cc13a010234f013e13e162df1b))
-* **deps:** bump puppeteer from 22.10.0 to 22.11.0 ([1f3b833](https://github.com/exadel-inc/esl/commit/1f3b83321778662127f9aa1167de0c387feafdfd))
-* **deps:** bump puppeteer from 22.11.0 to 22.11.1 ([40c7f0a](https://github.com/exadel-inc/esl/commit/40c7f0a06018f756c2ec88cfdd472fc1d22a9332))
-* **deps:** bump puppeteer from 22.11.1 to 22.11.2 ([8a824cf](https://github.com/exadel-inc/esl/commit/8a824cffc9ba70a56bc877fcf6683fb5a80d9b6f))
-* **deps:** bump webpack from 5.91.0 to 5.92.0 ([ab7f579](https://github.com/exadel-inc/esl/commit/ab7f579cc46f602e4575fc9562c9d8d8baa9b7cd))
-* **deps:** bump webpack from 5.92.0 to 5.92.1 ([6909d17](https://github.com/exadel-inc/esl/commit/6909d1709e32b570af9d8cffb7c0ba509d724ae6))
-* **deps:** bump ws from 7.5.9 to 7.5.10 ([330fd97](https://github.com/exadel-inc/esl/commit/330fd97664ba5276e89ef723e4ca388a201424db))
-* **esl-carousel:** add possibility to hide controls according to closest container state ([b941748](https://github.com/exadel-inc/esl/commit/b941748a4ba7d51adf6ea9b8747570e8c774dd16))
-* **lint:** notify about version differences for `eslint-plugin-esl` ([4cc0ddc](https://github.com/exadel-inc/esl/commit/4cc0ddc515f1c2b5ed2f4e2d745001784a98ce2f))
-
 ## [5.0.0-beta.19](https://github.com/exadel-inc/esl/compare/v5.0.0-beta.18...v5.0.0-beta.19) (2024-05-31)
 
 
diff --git a/eslint/package.json b/eslint/package.json
index dd1332218..ecbff38a2 100644
--- a/eslint/package.json
+++ b/eslint/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@exadel/eslint-plugin-esl",
-  "version": "5.0.0-beta.20",
+  "version": "5.0.0-beta.19",
   "keywords": [
     "eslint",
     "eslint-plugin",
diff --git a/package-lock.json b/package-lock.json
index 3a9f60dc9..b2c026b0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@exadel/esl",
-  "version": "5.0.0-beta.20",
+  "version": "5.0.0-beta.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@exadel/esl",
-      "version": "5.0.0-beta.20",
+      "version": "5.0.0-beta.19",
       "license": "MIT",
       "workspaces": [
         "e2e",
@@ -60,7 +60,7 @@
     },
     "e2e": {
       "name": "@exadel/esl-snapshot-tests",
-      "version": "5.0.0-beta.20",
+      "version": "5.0.0-beta.19",
       "license": "MIT",
       "dependencies": {
         "@types/jest-environment-puppeteer": "^5.0.6",
@@ -74,7 +74,7 @@
     },
     "eslint": {
       "name": "@exadel/eslint-plugin-esl",
-      "version": "5.0.0-beta.20",
+      "version": "5.0.0-beta.19",
       "license": "MIT",
       "dependencies": {
         "semver": "^7.6.2"
@@ -21703,7 +21703,7 @@
     },
     "site": {
       "name": "@exadel/esl-website",
-      "version": "5.0.0-beta.20",
+      "version": "5.0.0-beta.19",
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
diff --git a/package.json b/package.json
index bcc3eefdf..1790c21f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@exadel/esl",
-  "version": "5.0.0-beta.20",
+  "version": "5.0.0-beta.19",
   "private": false,
   "description": "Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components",
   "license": "MIT",
diff --git a/site/package.json b/site/package.json
index 4deb35508..459c7e522 100644
--- a/site/package.json
+++ b/site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@exadel/esl-website",
-  "version": "5.0.0-beta.20",
+  "version": "5.0.0-beta.19",
   "private": true,
   "description": "ESL Website source",
   "homepage": "https://esl-ui.com/",
diff --git a/site/src/common/helpers.less b/site/src/common/helpers.less
index b7e7d5d00..7c045e4aa 100644
--- a/site/src/common/helpers.less
+++ b/site/src/common/helpers.less
@@ -100,6 +100,10 @@
     margin-left: 2rem !important;
     margin-right: 2rem !important;
   }
+  &-6 {
+    margin-left: 2.5rem !important;
+    margin-right: 2.5rem !important;
+  }
   &-auto {
     margin-right: auto !important;
     margin-left: auto !important;
diff --git a/site/src/localdev.less b/site/src/localdev.less
index 679da0276..3c2e47907 100644
--- a/site/src/localdev.less
+++ b/site/src/localdev.less
@@ -39,7 +39,6 @@
 @import './collection-grid/collection-grid.less';
 @import './esl-share/esl-share.less';
 @import './esl-events-demo/esl-events-demo.less';
-@import './esl-carousel-demo/test-carousel.less';
 
 @import './back-link/back-link';
 
diff --git a/site/views/examples/carousel.11tydata.yml b/site/views/draft/carousel.11tydata.yml
similarity index 100%
rename from site/views/examples/carousel.11tydata.yml
rename to site/views/draft/carousel.11tydata.yml
diff --git a/site/views/draft/carousel.njk b/site/views/draft/carousel.njk
new file mode 100644
index 000000000..438a34986
--- /dev/null
+++ b/site/views/draft/carousel.njk
@@ -0,0 +1,217 @@
+---
+layout: content
+title: Carousel (Regression)
+name: Carousel (Regression)
+tags: [draft]
+icon: examples/carousel.svg
+---
+{% import 'lorem.njk' as lorem %}
+
+<section>
+  <h2>Multi-slide Carousel (cards, adaptive, loop, with footnotes example): </h2>
+  <div esl-carousel-container>
+    <button class="esl-carousel-arrow prev hide-xs"
+            esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
+
+    <esl-carousel esl-carousel-touch
+                  esl-carousel-keyboard
+                  tabindex="0"
+                  media="@XS|@SM|@MD|@LG|@XL"
+                  loop="true"
+                  count="1|2|3|4|5">
+      <ul esl-carousel-slides>
+        {% for item in cards | limit(10) %}
+          <li esl-carousel-slide {{ 'active' if loop.first }}>
+            <div class="card">
+              <div class="card-image img-container img-container-16-9">
+                <esl-image lazy
+                           mode="cover"
+                           data-alt="{{ 'Carousel slide ' + loop.index }}"
+                           data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+              </div>
+              <div class="card-content p-3">
+                <h5>{{ item.name }}<esl-note>{{ loop.index }}</esl-note></h5>
+                <p>{{ lorem.string(12) }}</p>
+                <button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
+              </div>
+            </div>
+          </li>
+        {% endfor %}
+      </ul>
+    </esl-carousel>
+
+    <button class="esl-carousel-arrow next hide-xs"
+            esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
+
+    <esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
+  </div>
+
+  <esl-footnotes class="mt-2" scope-target="::parent(section)"></esl-footnotes>
+</section>
+
+
+<section>
+  <h2>Multi-slide Carousel (cards, adaptive, loop): </h2>
+  <div esl-carousel-container>
+    <button class="esl-carousel-arrow prev hide-xs"
+            esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
+
+    <esl-carousel esl-carousel-touch
+                  esl-carousel-keyboard
+                  tabindex="0"
+                  media="@XS|@SM|@MD|@LG|@XL"
+                  loop="true"
+                  count="1|2|3|4|5">
+      <ul esl-carousel-slides>
+        {% for item in cards | limit(4) %}
+          <li esl-carousel-slide {{ 'active' if loop.first }}>
+            <div class="card">
+              <div class="card-image img-container img-container-16-9">
+                <esl-image lazy
+                           mode="cover"
+                           data-alt="{{ 'Carousel slide ' + loop.index }}"
+                           data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+              </div>
+              <div class="card-content p-3">
+                <h5>{{ item.name }}</h5>
+                <p>{{ lorem.string(12) }}</p>
+                <button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
+              </div>
+            </div>
+          </li>
+        {% endfor %}
+      </ul>
+    </esl-carousel>
+
+    <button class="esl-carousel-arrow next hide-xs"
+            esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
+
+    <esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
+  </div>
+</section>
+
+<a href="#"> Something accessible</a>
+<section>
+  <h2>Carousel with siblings: </h2>
+  <div esl-carousel-container>
+    <button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
+      <span class="sr-only">Previous Slide</span>
+    </button>
+
+    <esl-carousel style="padding-inline: 60px"
+                  esl-carousel-touch
+                  count="2"
+                  loop="true">
+      <ul esl-carousel-slides>
+        {% for i in range(0, 6) -%}
+          <li esl-carousel-slide style="max-width: 50%">
+            <div class="card">
+              <esl-image mode="cover" lazy
+                         data-alt="Alt Text Test"
+                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+            </div>
+          </li>
+        {%- endfor %}
+      </ul>
+    </esl-carousel>
+
+    <button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
+      <span class="sr-only">Next Slide</span>
+    </button>
+
+    <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+  </div>
+</section>
+
+<section>
+  <h2>Multi-slide Carousel (simplified cards, adaptive, loop): </h2>
+  <div esl-carousel-container>
+     <button class="esl-carousel-arrow prev hide-xs" esl-carousel-nav="group:prev">
+        <span class="sr-only">Previous Slide</span>
+     </button>
+
+     <esl-carousel esl-carousel-touch="none | @XS => drag"
+                   media="@XS|@SM|@MD|@LG|@XL"
+                   count="2|3|4|5|6"
+                   loop="true">
+        <ul esl-carousel-slides>
+        {% for item in items %}
+           <li esl-carousel-slide {{ 'active' if loop.first }}>
+              <div class="card" style="justify-content: center; background: {{item.background}}">
+                  <h4 class="text-center mb-0">{{ item.name }}</h4>
+              </div>
+           </li>
+        {% endfor %}
+        </ul>
+     </esl-carousel>
+
+     <button class="esl-carousel-arrow next hide-xs" esl-carousel-nav="group:next">
+        <span class="sr-only">Next Slide</span>
+     </button>
+
+     <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+  </div>
+</section>
+
+
+<section>
+  <h2>Multi-slide Carousel (simplified cards, adaptive, without loop): </h2>
+  <div esl-carousel-container>
+    <button class="esl-carousel-arrow prev hide-xs" esl-carousel-nav="group:prev">
+      <span class="sr-only">Previous Slide</span>
+    </button>
+
+    <esl-carousel esl-carousel-touch="none | @XS => drag"
+                  media="@XS|@SM|@MD|@LG|@XL"
+                  count="2|3|4|5|6">
+      <ul esl-carousel-slides>
+        {% for item in items %}
+          <li esl-carousel-slide {{ 'active' if loop.first }}>
+            <div class="card" style="justify-content: center; background: {{item.background}}">
+              <h4 class="text-center mb-0">{{ item.name }}</h4>
+            </div>
+          </li>
+        {% endfor %}
+      </ul>
+    </esl-carousel>
+
+    <button class="esl-carousel-arrow next hide-xs" esl-carousel-nav="group:next">
+      <span class="sr-only">Next Slide</span>
+    </button>
+
+    <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+  </div>
+</section>
+
+
+<section>
+  <h2>Single active slide demo: </h2>
+  <div esl-carousel-container>
+     <button class="esl-carousel-arrow prev hide-xs" esl-carousel-nav="group:prev">
+        <span class="sr-only">Previous Slide</span>
+     </button>
+
+     <esl-carousel esl-carousel-touch="@touch => swipe" loop="true">
+        <ul esl-carousel-slides>
+          {% for i in range(0, 4) -%}
+           <li esl-carousel-slide>
+              <div class="card">
+                  <div class="img-container img-container-16-9">
+                      <esl-image mode="cover" lazy
+                                 data-alt="Alt Text Test"
+                                 data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+                  </div>
+              </div>
+           </li>
+          {%- endfor %}
+        </ul>
+     </esl-carousel>
+
+     <button class="esl-carousel-arrow next hide-xs" esl-carousel-nav="group:next">
+        <span class="sr-only">Next Slide</span>
+     </button>
+
+     <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+  </div>
+</section>
+
diff --git a/site/views/examples/carousel.marquee.11tydata.yml b/site/views/examples/carousel.marquee.11tydata.yml
deleted file mode 100644
index 25369ac82..000000000
--- a/site/views/examples/carousel.marquee.11tydata.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-slides:
-  - name: Slide 1
-  - name: Slide 2
-  - name: Slide 3
-  - name: Slide 4
-  - name: Slide 5
-  - name: Slide 6
-  - name: Slide 7
-  - name: Slide 8
diff --git a/site/views/examples/carousel.marquee.njk b/site/views/examples/carousel.marquee.njk
deleted file mode 100644
index f76ed0116..000000000
--- a/site/views/examples/carousel.marquee.njk
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: content
-title: Carousel Marquee
-seoTitle: Carousel UI examples based on ESL web components
-name: Carousel Marquee
-tags: [examples, draft]
-icon: examples/carousel.svg
----
-
-<section class="marquee-carousel">
-  <div class="flex-column main-carousel" esl-carousel-container>
-    <esl-carousel id="main-carousel"
-                  type="default"
-                  esl-carousel-touch
-                  esl-carousel-relate-to="#nav-carousel">
-      <ul esl-carousel-slides>
-        {% for item in slides %}
-        <li esl-carousel-slide>
-          <div class="img-container img-container-16-9">
-            <esl-image mode="cover"
-                       lazy
-                       data-alt="{{ 'Carousel slide ' + loop.index }}"
-                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
-          </div>
-        </li>
-        {% endfor %}
-      </ul>
-    </esl-carousel>
-
-    <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
-  </div>
-  <div class="flex-column marquee-nav-carousel" esl-carousel-container>
-    <button class="esl-carousel-arrow inner prev" esl-carousel-nav="-4"></button>
-
-    <esl-carousel id="nav-carousel"
-                  esl-carousel-touch
-                  type="default"
-                  count="5">
-      <ul esl-carousel-slides>
-        {% for item in slides %}
-        <li esl-carousel-slide>
-          <div class="img-container img-container-4-3"
-               esl-carousel-nav="slide:{{ loop.index - 1 }}"
-               esl-carousel-nav-target="#main-carousel">
-            <esl-image mode="cover" lazy
-                       data-alt="{{ 'Carousel slide ' + loop.index }}"
-                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
-          </div>
-        </li>
-        {% endfor %}
-      </ul>
-    </esl-carousel>
-
-    <button class="esl-carousel-arrow inner next" esl-carousel-nav="+4"></button>
-  </div>
-</section>
diff --git a/site/views/examples/carousel.njk b/site/views/examples/carousel.njk
index d0d178eb4..6578be9a7 100644
--- a/site/views/examples/carousel.njk
+++ b/site/views/examples/carousel.njk
@@ -1,257 +1,49 @@
 ---
 layout: content
-title: Carousel Example
-name: Carousel Example
-tags: [examples, draft]
+title: Carousel
+name: Carousel
+tags: [examples, beta]
 icon: examples/carousel.svg
+eleventyImport:
+  collections: ["carousel-sample"]
 ---
 {% import 'lorem.njk' as lorem %}
 
-<section>
-  <h2>Multi-slide Carousel (cards, adaptive, loop): </h2>
-  <div esl-carousel-container>
-    <button class="esl-carousel-arrow prev hide-xs"
-            esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
 
-    <esl-carousel esl-carousel-touch
-                  esl-carousel-keyboard
-                  tabindex="0"
-                  media="@XS|@SM|@MD|@LG|@XL"
-                  loop="true"
-                  count="1|2|3|4|5">
-      <ul esl-carousel-slides>
-        {% for item in cards %}
-          <li esl-carousel-slide {{ 'active' if loop.first }}>
-            <div class="card">
-              <div class="card-image img-container img-container-16-9">
-                <esl-image lazy
-                           mode="cover"
-                           data-alt="{{ 'Carousel slide ' + loop.index }}"
-                           data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
-              </div>
-              <div class="card-content p-3">
-                <h5>{{ item.name }}</h5>
-                <p>{{ lorem.string(12) }}</p>
-                <button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
-              </div>
-            </div>
-          </li>
-        {% endfor %}
-      </ul>
-    </esl-carousel>
-
-    <button class="esl-carousel-arrow next hide-xs"
-            esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
-
-    <esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
-  </div>
-</section>
-
-<section>
-  <h2>Multi-slide Carousel (cards, adaptive, loop, with footnotes example): </h2>
-  <div esl-carousel-container>
-    <button class="esl-carousel-arrow prev hide-xs"
-            esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
-
-    <esl-carousel esl-carousel-touch
-                  esl-carousel-keyboard
-                  tabindex="0"
-                  media="@XS|@SM|@MD|@LG|@XL"
-                  loop="true"
-                  count="1|2|3|4|5">
-      <ul esl-carousel-slides>
-        {% for item in cards | limit(5) %}
-          <li esl-carousel-slide {{ 'active' if loop.first }}>
-            <div class="card">
-              <div class="card-image img-container img-container-16-9">
-                <esl-image lazy
-                           mode="cover"
-                           data-alt="{{ 'Carousel slide ' + loop.index }}"
-                           data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
-              </div>
-              <div class="card-content p-3">
-                <h5>{{ item.name }}<esl-note>{{ loop.index }}</esl-note></h5>
-                <p>{{ lorem.string(12) }}</p>
-                <button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
-              </div>
-            </div>
-          </li>
-        {% endfor %}
-      </ul>
-    </esl-carousel>
-
-    <button class="esl-carousel-arrow next hide-xs"
-            esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
-
-    <esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
-  </div>
-
-  <esl-footnotes class="mt-2" scope-target="::parent(section)"></esl-footnotes>
-</section>
-
-
-<section>
-  <h2>Multi-slide Carousel (cards, adaptive, loop): </h2>
-  <div esl-carousel-container>
-    <button class="esl-carousel-arrow prev hide-xs"
-            esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
-
-    <esl-carousel esl-carousel-touch
-                  esl-carousel-keyboard
-                  tabindex="0"
-                  media="@XS|@SM|@MD|@LG|@XL"
-                  loop="true"
-                  count="1|2|3|4|5">
-      <ul esl-carousel-slides>
-        {% for item in cards | limit(4) %}
-          <li esl-carousel-slide {{ 'active' if loop.first }}>
-            <div class="card">
-              <div class="card-image img-container img-container-16-9">
-                <esl-image lazy
-                           mode="cover"
-                           data-alt="{{ 'Carousel slide ' + loop.index }}"
-                           data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
-              </div>
-              <div class="card-content p-3">
-                <h5>{{ item.name }}</h5>
-                <p>{{ lorem.string(12) }}</p>
-                <button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
-              </div>
-            </div>
-          </li>
-        {% endfor %}
-      </ul>
-    </esl-carousel>
-
-    <button class="esl-carousel-arrow next hide-xs"
-            esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
-
-    <esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
-  </div>
-</section>
-
-<a href="#"> Something accessible</a>
-<section>
-  <h2>Carousel with siblings: </h2>
-  <div esl-carousel-container>
-    <button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
-      <span class="sr-only">Previous Slide</span>
-    </button>
-
-    <esl-carousel style="padding-inline: 60px"
-                  esl-carousel-touch
-                  count="2"
-                  loop="true">
-      <ul esl-carousel-slides>
-        {% for i in range(0, 6) -%}
-          <li esl-carousel-slide style="max-width: 50%">
-            <div class="card">
-              <esl-image mode="cover" lazy
-                         data-alt="Alt Text Test"
-                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
-            </div>
-          </li>
-        {%- endfor %}
-      </ul>
-    </esl-carousel>
-
-    <button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
-      <span class="sr-only">Next Slide</span>
-    </button>
-
-    <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+<div class="alert alert-warning">
+  ESL Carousel component is available starting from 5.0.0 version of ESL.
+</div>
+
+
+<section class="row">
+  <div class="col-12">
+    <uip-root>
+      {% for sample in collections['carousel-sample'] | sortByNameAndOrder %}
+        <script type="text/html"
+                label=" {{ sample.data.title }}"
+                uip-snippet
+                uip-snippet-js="js-snippet-carousel-registration">
+          {{ sample.content | safe }}
+        </script>
+      {% endfor %}
+
+      <script id="js-snippet-carousel-registration" type="text/plain">
+        import {ESLCarousel} from '@exadel/esl';
+        ESLCarousel.register();
+      </script>
+
+      <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
+      <uip-preview></uip-preview>
+      <uip-settings target="[demo-options-target]" label="Quick Options" collapsible collapsed>
+        <uip-bool-setting label="Loop" attribute="loop"></uip-bool-setting>
+        <uip-select-setting label="Touch Plugin:" attribute="esl-carousel-touch" mode="replace">
+          <option value="none">Disable</option>
+          <option value="drag">Always Drag</option>
+          <option value="swipe">Always Swipe</option>
+        </uip-select-setting>
+      </uip-settings>
+      <uip-editor label="Source code (HTML)" collapsible copy></uip-editor>
+      <uip-editor source="js" label="Source code (JS)" collapsible collapsed copy></uip-editor>
+    </uip-root>
   </div>
 </section>
-
-<section>
-  <h2>Multi-slide Carousel (simplified cards, adaptive, loop): </h2>
-  <div esl-carousel-container>
-     <button class="esl-carousel-arrow prev hide-xs" esl-carousel-nav="group:prev">
-        <span class="sr-only">Previous Slide</span>
-     </button>
-
-     <esl-carousel esl-carousel-touch="none | @XS => drag"
-                   media="@XS|@SM|@MD|@LG|@XL"
-                   count="2|3|4|5|6"
-                   loop="true">
-        <ul esl-carousel-slides>
-        {% for item in items %}
-           <li esl-carousel-slide {{ 'active' if loop.first }}>
-              <div class="card" style="justify-content: center; background: {{item.background}}">
-                  <h4 class="text-center mb-0">{{ item.name }}</h4>
-              </div>
-           </li>
-        {% endfor %}
-        </ul>
-     </esl-carousel>
-
-     <button class="esl-carousel-arrow next hide-xs" esl-carousel-nav="group:next">
-        <span class="sr-only">Next Slide</span>
-     </button>
-
-     <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
-  </div>
-</section>
-
-
-<section>
-  <h2>Multi-slide Carousel (simplified cards, adaptive, without loop): </h2>
-  <div esl-carousel-container>
-    <button class="esl-carousel-arrow prev hide-xs" esl-carousel-nav="group:prev">
-      <span class="sr-only">Previous Slide</span>
-    </button>
-
-    <esl-carousel esl-carousel-touch="none | @XS => drag"
-                  media="@XS|@SM|@MD|@LG|@XL"
-                  count="2|3|4|5|6">
-      <ul esl-carousel-slides>
-        {% for item in items %}
-          <li esl-carousel-slide {{ 'active' if loop.first }}>
-            <div class="card" style="justify-content: center; background: {{item.background}}">
-              <h4 class="text-center mb-0">{{ item.name }}</h4>
-            </div>
-          </li>
-        {% endfor %}
-      </ul>
-    </esl-carousel>
-
-    <button class="esl-carousel-arrow next hide-xs" esl-carousel-nav="group:next">
-      <span class="sr-only">Next Slide</span>
-    </button>
-
-    <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
-  </div>
-</section>
-
-
-<section>
-  <h2>Single active slide demo: </h2>
-  <div esl-carousel-container>
-     <button class="esl-carousel-arrow prev hide-xs" esl-carousel-nav="group:prev">
-        <span class="sr-only">Previous Slide</span>
-     </button>
-
-     <esl-carousel esl-carousel-touch="@touch => swipe" loop="true">
-        <ul esl-carousel-slides>
-          {% for i in range(0, 4) -%}
-           <li esl-carousel-slide>
-              <div class="card">
-                  <div class="img-container img-container-16-9">
-                      <esl-image mode="cover" lazy
-                                 data-alt="Alt Text Test"
-                                 data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
-                  </div>
-              </div>
-           </li>
-          {%- endfor %}
-        </ul>
-     </esl-carousel>
-
-     <button class="esl-carousel-arrow next hide-xs" esl-carousel-nav="group:next">
-        <span class="sr-only">Next Slide</span>
-     </button>
-
-     <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
-  </div>
-</section>
-
diff --git a/site/views/examples/carousel/default.sample.njk b/site/views/examples/carousel/default.sample.njk
new file mode 100644
index 000000000..66641c71d
--- /dev/null
+++ b/site/views/examples/carousel/default.sample.njk
@@ -0,0 +1,42 @@
+---
+title: Carousel (Multislide)
+order: 1
+tags: carousel-sample
+---
+<div class="mx-6" esl-carousel-container>
+  <button class="esl-carousel-arrow prev hide-xs"
+          esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
+
+  <esl-carousel demo-options-target
+                esl-carousel-touch
+                esl-carousel-keyboard
+                tabindex="0"
+                media="@XS|@SM|@MD|@LG|@XL"
+                count="1|2|3|4|5"
+                loop="true">
+    <ul esl-carousel-slides>
+      {% for item in range(0, 16) %}
+        <li esl-carousel-slide {{ 'active' if loop.first }}>
+          <div class="card">
+            <div class="card-image img-container img-container-16-9">
+              <esl-image lazy
+                         mode="cover"
+                         data-alt="{{ 'Carousel slide ' + loop.index }}"
+                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+            </div>
+            <div class="card-content p-3">
+              <h5>Item {{ loop.index }}</h5>
+              <p><!-- text 20 --></p>
+              <button type="button" class="btn" onclick="alert('Hi')">Card CTA</button>
+            </div>
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+  </esl-carousel>
+
+  <button class="esl-carousel-arrow next hide-xs"
+          esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
+
+  <esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
+</div>
diff --git a/site/views/examples/carousel/nav-carousel.sample.njk b/site/views/examples/carousel/nav-carousel.sample.njk
new file mode 100644
index 000000000..f015ba446
--- /dev/null
+++ b/site/views/examples/carousel/nav-carousel.sample.njk
@@ -0,0 +1,48 @@
+---
+title: Carousel (Nav Carousel)
+order: 10
+tags: carousel-sample
+---
+<div class="flex-column main-carousel" esl-carousel-container>
+  <esl-carousel demo-options-target
+                id="main-carousel"
+                type="default"
+                esl-carousel-touch
+                esl-carousel-relate-to="#nav-carousel">
+    <ul esl-carousel-slides>
+      {% for item in range(0, 8) %}
+        <li esl-carousel-slide>
+          <div class="img-container img-container-16-9">
+            <esl-image mode="cover"
+                       lazy
+                       data-alt="{{ 'Carousel slide ' + loop.index }}"
+                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+  </esl-carousel>
+</div>
+<div class="flex-column marquee-nav-carousel" esl-carousel-container>
+  <button class="esl-carousel-arrow inner prev" esl-carousel-nav="-4"></button>
+
+  <esl-carousel id="nav-carousel"
+                esl-carousel-touch="drag"
+                count="5">
+    <ul esl-carousel-slides>
+      {% for item in range(0, 16) %}
+        <li esl-carousel-slide>
+          <div class="img-container img-container-4-3"
+               esl-carousel-nav="slide:{{ loop.index - 1 }}"
+               esl-carousel-nav-target="#main-carousel">
+            <esl-image mode="cover" lazy
+                       data-alt="{{ 'Carousel slide ' + loop.index }}"
+                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+  </esl-carousel>
+
+  <button class="esl-carousel-arrow inner next" esl-carousel-nav="+4"></button>
+</div>
diff --git a/site/views/examples/carousel/siblings.sample.njk b/site/views/examples/carousel/siblings.sample.njk
new file mode 100644
index 000000000..b9e092926
--- /dev/null
+++ b/site/views/examples/carousel/siblings.sample.njk
@@ -0,0 +1,34 @@
+---
+title: Carousel (Sibling)
+order: 3
+tags: carousel-sample
+---
+<div esl-carousel-container>
+  <button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
+    <span class="sr-only">Previous Slide</span>
+  </button>
+
+  <esl-carousel demo-options-target
+                style="padding-inline: 60px"
+                esl-carousel-touch
+                count="2"
+                loop="true">
+    <ul esl-carousel-slides>
+      {% for i in range(0, 6) -%}
+        <li esl-carousel-slide style="max-width: 50%">
+          <div class="card">
+            <esl-image mode="cover" lazy
+                       data-alt="Alt Text Test"
+                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+          </div>
+        </li>
+      {%- endfor %}
+    </ul>
+  </esl-carousel>
+
+  <button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
+    <span class="sr-only">Next Slide</span>
+  </button>
+
+  <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+</div>
diff --git a/site/views/examples/carousel/single.sample.njk b/site/views/examples/carousel/single.sample.njk
new file mode 100644
index 000000000..f80a67551
--- /dev/null
+++ b/site/views/examples/carousel/single.sample.njk
@@ -0,0 +1,43 @@
+---
+title: Carousel (Single)
+order: 2
+tags: carousel-sample
+---
+
+<div class="esl-carousel-no-extra-space" esl-carousel-container>
+  <button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
+    <span class="sr-only">Previous Slide</span>
+  </button>
+
+  <esl-carousel esl-carousel-touch="@touch => swipe" loop="true">
+    <ul esl-carousel-slides>
+      {% for i in range(0, 4) -%}
+        <li esl-carousel-slide>
+          <div class="card">
+            <div class="img-container img-container-16-9">
+              <esl-image mode="cover" lazy
+                         data-alt="Alt Text Test"
+                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+              <div class="h1 text-slide text-white">Slide {{ loop.index }}</div>
+            </div>
+          </div>
+        </li>
+      {%- endfor %}
+    </ul>
+  </esl-carousel>
+
+  <button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
+    <span class="sr-only">Next Slide</span>
+  </button>
+
+  <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+
+  <style>
+    .text-slide {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  </style>
+</div>
diff --git a/src/modules/esl-carousel/core/esl-carousel.less b/src/modules/esl-carousel/core/esl-carousel.less
index a308964ed..32f155160 100644
--- a/src/modules/esl-carousel/core/esl-carousel.less
+++ b/src/modules/esl-carousel/core/esl-carousel.less
@@ -61,3 +61,7 @@ esl-carousel {
 [esl-carousel-container][incomplete] {
   --esl-carousel-control-visibility: hidden;
 }
+
+.esl-carousel-no-extra-space {
+  --esl-carousel-side-space: 0;
+}


Test patch:
diff --git a/e2e/package.json b/e2e/package.json
index cfc57eac6..c003ee9d7 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@exadel/esl-snapshot-tests",
-  "version": "5.0.0-beta.20",
+  "version": "5.0.0-beta.19",
   "description": "Integration snapshot tests for ESL",
   "homepage": "https://esl-ui.com/",
   "license": "MIT",
diff --git a/site/src/esl-carousel-demo/test-carousel.less b/site/src/esl-carousel-demo/test-carousel.less
deleted file mode 100644
index d5347d5a1..000000000
--- a/site/src/esl-carousel-demo/test-carousel.less
+++ /dev/null
@@ -1,78 +0,0 @@
-@import (reference) '../common/variables.less';
-
-// TODO: Cleanup according to core styles update
-
-.marquee-carousel [esl-carousel-container] {
-  esl-carousel {
-    margin: 0;
-    padding: 0;
-  }
-  .img-container {
-    width: 100%;
-    height: 100%;
-  }
-
-  button.arrow-prev {
-    left: 0;
-    &::before {
-      background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23fff'%3E%3Cpath d='M31 40 16 25l15-15 2 2-13 13 13 13z'/%3E%3C/svg%3E");
-    }
-  }
-  button.arrow-next {
-    right: 0;
-    &::before {
-      background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23fff'%3E%3Cpath d='M31 40 16 25l15-15 2 2-13 13 13 13z'/%3E%3C/svg%3E");
-    }
-  }
-  button.arrow-prev::before,
-  button.arrow-next::before {
-    width: 60px;
-    height: 60px;
-  }
-  .carousel-dots-wrapper {
-    position: absolute;
-    bottom: 50px;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, 0%);
-    @media @lg-xl {
-      display: none;
-    }
-  }
-
-  &.main-carousel {
-    div[esl-carousel-slides] {
-      min-height: 500px;
-      gap: 0;
-    }
-    [esl-carousel-slide] {
-      padding: 0;
-    }
-    button.arrow-prev,
-    button.arrow-next {
-      @media @lg-xl {
-        display: none;
-      }
-    }
-  }
-
-  &.marquee-nav-carousel {
-    padding: 0 60px;
-    [esl-carousel-slide] {
-      margin: 10px 0;
-    }
-    &::before {
-      position: absolute;
-      content: '';
-      background: black;
-      height: 100%;
-      width: 100%;
-      top: 0;
-      left: 0;
-      overflow: hidden;
-    }
-    @media @xs-md {
-      display: none;
-    }
-  }
-}