Unplanned
Last Updated: 04 Oct 2024 15:40 by Bradley
Created by: Mark
Comments: 2
Category: Carousel
Type: Feature Request
3

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; }
    }
}

Unplanned
Last Updated: 18 Jul 2024 11:39 by Stephen
Created by: Stephen
Comments: 0
Category: Carousel
Type: Feature Request
1

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.

Unplanned
Last Updated: 02 Mar 2023 11:20 by Ed

When the Carousel has a lot of images/pages, the pager overflows the component and some of the page buttons are not visible. This prevents the user from navigating to a specific page using the pager.

 

Pager should be scrollable as in the example here: https://demos.telerik.com/kendo-ui/scrollview/api. Once the user selects the last visible page button, the pager scrolls to show the rest of the page buttons.

===

ADMIN EDIT

===

A possible workaround for the time being is to use some CSS to wrap the pager so it does not overflow and all the available page buttons are visible.

Example configuration: https://blazorrepl.telerik.com/mnEnkcFl074Lf7ec57.

Unplanned
Last Updated: 16 Feb 2023 09:07 by Peter
Created by: Peter
Comments: 0
Category: Carousel
Type: Feature Request
1

I would like to show multiple images on a single page of the Carousel.

Declined
Last Updated: 01 Feb 2022 06:43 by ADMIN

---

ADMIN EDIT

I can see all the items, and the carousel takes up the entire viewport.

Two screenshots attached with 3.0.0 and 2.30.0 respectively.

---