mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-04 13:08:23 +08:00
afc1f2b7bf
* feat (module: carousel): add component carousel * implmement acitvate carousel button * update active slick * feat(module: carousel): add DotPosition * feat(module: carousel): add dot position demo * feat(module: carousel): implement fade in effect * feat(module: carousel): animation for autoplay from last to the first
59 lines
2.6 KiB
Plaintext
59 lines
2.6 KiB
Plaintext
@namespace AntBlazor
|
|
@inherits AntDomComponentBase
|
|
|
|
<CascadingValue Value="this">
|
|
@ChildContent
|
|
</CascadingValue>
|
|
|
|
<div class="@ClassMapper.Class" id="@Id">
|
|
<div class="slick-slider slick-initialized" dir="ltr">
|
|
<div class="slick-list" @ref="_ref" >
|
|
<div class="slick-track" style="@_trackStyle">
|
|
@if (_slicks.Count > 0 && Effect == AntCarouselEffect.ScrollX)
|
|
{
|
|
<div data-index="-1" class="slick-slide slick-cloned" tabindex="-1" aria-hidden="true" style="@_slickClonedStyle">
|
|
<div>
|
|
<div tabindex="-1" style="width: 100%; display: inline-block;">
|
|
@_slicks.Last().ChildContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
@for (int i = 0; i < _slicks.Count; i++)
|
|
{
|
|
int index = i;
|
|
<div data-index="@index" class="@_slicks[index].Class" tabindex="-1" aria-hidden="@((!_slicks[index].Active).ToString())" style="@_slicks[index].GetStyle(index, _slickWidth, Effect)">
|
|
<div>
|
|
<div tabindex="-1" style="width: 100%; display: inline-block;">
|
|
@_slicks[index].ChildContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
@if (Effect == AntCarouselEffect.ScrollX)
|
|
{
|
|
for (int i = 0; i < _slicks.Count; i++)
|
|
{
|
|
int index = i;
|
|
<div data-index="@(i+_slicks.Count)" class="slick-slide slick-cloned" tabindex="-1" aria-hidden="true" style="@_slickClonedStyle">
|
|
<div>
|
|
<div tabindex="-1" style="width: 100%; display: inline-block;">
|
|
@_slicks[index].ChildContent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
<ul class="@($"slick-dots slick-dots-{DotPosition.ToString().ToLower()}")" style="display: block;">
|
|
@for (int i = 0; i < _slicks.Count; i++)
|
|
{
|
|
int index = i;
|
|
<li class="@(_slicks[index].Active?"slick-active":string.Empty)">
|
|
<button @onclick="(e)=>Activate(index)">@(index + 1)</button>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div> |