Carousel looks like it rewinds or fast forwards when it loops. I want it to go directly from last to first or first to last without the transition.
https://www.telerik.com/kendo-angular-ui/components/scrollview/endless-scrolling/
-----ADMIN EDIT-----
Currently, the most convenient approach to mitigate the issue with rewinding fast forward/backward is to conditionally stop the animation by applying a custom CSS class. This class will pause the transition animation when transitioning from the initial slide to the last one, or vice versa.
<TelerikButton OnClick="AddNewItem">Add New Item</TelerikButton>
<TelerikCarousel @ref="@CarouselRef" Class="@(isScrollable ? "" : "my-carousel")" Data="@CarouselData"
Page="@PageIndex"
PageChanged="@PageChangedHandler"
Width="400px" Height="200px" AutomaticPageChange="false">
<Template>
<div class="item">ID @(context.ID) : @(context.Text)</div>
</Template>
</TelerikCarousel>
<style>
.item {
background: #3d57d8;
color: #fff;
font: 36px/200px sans-serif;
text-align: center;
}
.my-carousel .k-scrollview-wrap.k-scrollview-animate {
transition-duration: 0s;
}
</style>
@code {
private TelerikCarousel<CarouselModel> CarouselRef;
public bool isScrollable { get; set; } = true;
public int PageIndex = 1;
public async Task PageChangedHandler(int newPage)
{
if (PageIndex == CarouselData.First().ID && newPage == CarouselData.Last().ID || PageIndex == CarouselData.Last().ID && newPage == CarouselData.First().ID)
{
isScrollable = false;
}
else
{
isScrollable = true;
}
PageIndex = newPage;
}
void AddNewItem()
{
CarouselData.Add(new CarouselModel() { ID = CarouselData.Count() + 1, Text = "Text " + (CarouselData.Count() + 1) });
isScrollable = false;
CarouselRef.Rebind();
}
public List<CarouselModel> CarouselData = new List<CarouselModel>()
{
new CarouselModel
{
ID = 1,
Text = "Text " + 1
},
new CarouselModel
{
ID = 2,
Text = "Text " + 2
},
new CarouselModel
{
ID = 3,
Text = "Text " + 3
}
};
public class CarouselModel
{
public int ID { get; set; }
public string Text { get; set; }
}
}
Currently, when the Carousel Data only contains one image, the navigation arrow buttons (previous and next) are still visible but they have no purpose in this scenario.
Please hide the arrows when the component has only one image.
===
ADMIN EDIT
===
An option to achieve this behavior in the meantime is to toggle the Arrows property of the Carousel based on the Data count: https://blazorrepl.telerik.com/GSEVvCus37r70wGx00.
I would like to show multiple images on a single page of the Carousel.