epic(esl carousel): esl-carousel component initial beta

package.json

@@ -45,10 +45,16 @@
     "modules/esl-media/providers/**/*.js",
     "modules/esl-share/actions/**/*.js",
     "modules/esl-share/buttons/**/*.js",
+    "modules/esl-carousel/core.js",
+    "modules/esl-carousel/renderers/**/*.js",
+
+    "src/modules/lib.ts",
     "src/modules/esl-media/providers/**/*.ts",
     "src/modules/esl-share/actions/**/*.ts",
     "src/modules/esl-share/buttons/**/*.ts",
-    "src/modules/lib.ts",
+    "src/modules/esl-carousel/core.ts",
+    "src/modules/esl-carousel/renderers/**/*.ts",
+
     "polyfills/**/*.js",
     "src/polyfills/**/*.ts"
   ],

site/src/common/card.less

@@ -0,0 +1,17 @@
+.card {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3);
+
+  &-image {
+    flex: 0 0 auto;
+  }
+  &-content {
+    flex: 1 1 auto;
+  }
+}

site/src/esl-carousel-demo/test-carousel.less

@@ -0,0 +1,76 @@
+@import (reference) '../common/variables.less';
+
+.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[data-slides-area] {
+      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;
+    }
+  }
+}

site/src/localdev.less

@@ -12,6 +12,7 @@
 @import './common/badge.less';
 @import './common/buttons.less';
 @import './common/code.less';
+@import './common/card.less';
 @import './common/links.less';
 @import './common/close.less';
 @import './common/containers.less';
@@ -38,6 +39,7 @@
 @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';
 

site/src/localdev.ts

@@ -33,7 +33,16 @@ import {
   ESLAnimate,
   ESLAnimateMixin,
   ESLRelatedTarget,
-  ESLOpenState
+  ESLOpenState,
+
+  ESLCarousel,
+  ESLCarouselNavDots,
+  ESLCarouselNavMixin,
+  ESLCarouselTouchMixin,
+  ESLCarouselWheelMixin,
+  ESLCarouselKeyboardMixin,
+  ESLCarouselRelateToMixin,
+  ESLCarouselAutoplayMixin
 } from '@exadel/esl/modules/all';
 
 import {ESLRandomText} from '@exadel/esl/modules/esl-random-text/core';
@@ -106,6 +115,15 @@ ESLNote.register();
 ESLNoteIgnore.register();
 ESLTooltip.register();
 
+ESLCarousel.register();
+ESLCarouselNavDots.register();
+ESLCarouselNavMixin.register();
+ESLCarouselTouchMixin.register();
+ESLCarouselKeyboardMixin.register();
+ESLCarouselRelateToMixin.register();
+ESLCarouselAutoplayMixin.register();
+ESLCarouselWheelMixin.register();
+
 ESLAnimate.register();
 ESLAnimateMixin.register();
 

site/views/examples/carousel.11tydata.yml

@@ -0,0 +1,59 @@
+cards:
+  - name: Slide 1
+    color: #f0f
+  - name: Slide 2
+    color: #f0f
+  - name: Slide 3
+    color: #f0f
+  - name: Slide 4
+    color: #f0f
+  - name: Slide 5
+    color: #f0f
+  - name: Slide 6
+    color: #f0f
+  - name: Slide 7
+    color: #f0f
+  - name: Slide 8
+    color: #f0f
+  - name: Slide 9
+    color: #f0f
+  - name: Slide 10
+    color: #f0f
+  - name: Slide 11
+    color: #f0f
+  - name: Slide 12
+    color: #f0f
+  - name: Slide 13
+    color: #f0f
+  - name: Slide 14
+    color: #f0f
+  - name: Slide 15
+    color: #f0f
+  - name: Slide 16
+    color: #f0f
+
+items:
+  - name: 1.Rome
+    background: '#FED6BC'
+  - name: 2.Paris
+    background: '#FFFADD'
+  - name: 3.Madrid
+    background: '#DEF7FE'
+  - name: 4.London
+    background: '#E7ECFF'
+  - name: 5.Berlin
+    background: '#C3FBD8'
+  - name: 6.Lisbon
+    background: '#FDEED9'
+  - name: 7.Barcelona
+    background: '#F6FFF8'
+  - name: 8.New York
+    background: '#B5F2EA'
+  - name: 9.Vena
+    background: '#C6D8FF'
+  - name: 10.Bern
+    background: '#F2E8C9'
+  - name: 11.Tokio
+    background: '#F5FFFA'
+  - name: 12.Warsaw
+    background: '#CCCCFF'

site/views/examples/carousel.marquee.11tydata.yml

@@ -0,0 +1,9 @@
+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

site/views/examples/carousel.marquee.njk

@@ -0,0 +1,55 @@
+---
+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">
+      <div data-slides-area>
+        {% for item in slides %}
+        <esl-carousel-slide>
+        <div class="img-container">
+          <esl-image mode="cover" lazy
+                        data-alt="{{ 'Carousel slide ' + loop.index }}"
+                        data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+        </div>
+        </esl-carousel-slide>
+        {% endfor %}
+      </div>
+    </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 icon-arrow-prev" esl-carousel-nav="-4"></button>
+
+    <esl-carousel id="nav-carousel"
+                  esl-carousel-touch
+                  type="default"
+                  count="5">
+      <div data-slides-area>
+        {% for item in slides %}
+        <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>
+        </esl-carousel-slide>
+        {% endfor %}
+      </div>
+    </esl-carousel>
+
+    <button class="esl-carousel-arrow inner icon-arrow-next" esl-carousel-nav="+4"></button>
+  </div>
+</section>