-
Notifications
You must be signed in to change notification settings - Fork 732
/
carousel.html
64 lines (64 loc) · 3.6 KB
/
carousel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2018 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
<div data-sly-use.carousel="com.adobe.cq.wcm.core.components.models.Carousel"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-use.controlsTemplate="controls.html"
data-panelcontainer="${wcmmode.edit && 'carousel'}"
id="${carousel.id}"
class="cmp-carousel"
role="group"
aria-label="${carousel.accessibilityLabel}"
aria-live="polite"
aria-roledescription="carousel"
data-cmp-is="carousel"
data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"
data-cmp-delay="${carousel.delay}"
data-cmp-autopause-disabled="${carousel.autopauseDisabled}"
data-cmp-data-layer="${carousel.data.json}"
data-placeholder-text="${wcmmode.edit && 'Please add Carousel components here' @ i18n}">
<sly data-sly-call="${controlsTemplate.controls @ carousel=carousel}" data-sly-test="${carousel.controlsPrepended}"></sly>
<div data-sly-set.items="${carousel.children || carousel.items}"
data-sly-test="${items && items.size > 0}"
class="cmp-carousel__content"
aria-atomic="false"
aria-live="${carousel.autoplay ? 'off' : 'polite'}">
<div data-sly-repeat.item="${items}"
data-sly-resource="${item.resource @ decorationTagName='div'}"
id="${item.id}-tabpanel"
class="cmp-carousel__item${item.name == carousel.activeItem ? ' cmp-carousel__item--active' : ''}"
role="tabpanel"
aria-labelledby="${item.id}-tab"
aria-roledescription="slide"
aria-label="${(carousel.accessibilityAutoItemTitles && item.title) || 'Slide {0} of {1}' @ format=[itemList.count, carousel.items.size], i18n}"
data-cmp-data-layer="${item.data.json}"
data-cmp-hook-carousel="item"></div>
<sly data-sly-call="${controlsTemplate.controls @ carousel=carousel}" data-sly-test="${!carousel.controlsPrepended}"></sly>
<ol class="cmp-carousel__indicators"
role="tablist"
aria-label="${carousel.accessibilityTablist || 'Choose a slide to display' @ i18n}"
data-cmp-hook-carousel="indicators">
<li data-sly-repeat.item="${items}"
id="${item.id}-tab"
class="cmp-carousel__indicator${item.name == carousel.activeItem ? ' cmp-carousel__indicator--active' : ''}"
role="tab"
aria-controls="${item.id}-tabpanel"
aria-label="${'Slide {0}' @ format=[itemList.count], i18n}"
data-cmp-hook-carousel="indicator">${item.title}</li>
</ol>
</div>
<sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
data-sly-test="${(wcmmode.edit || wcmmode.preview) && items.size < 1}"></sly>
</div>