BasicCarousel not Responsive and How to change animate like slide effect

[bobwatcherx]

I want it to be responsive at all sizes. and I want there to be a slide effect or a custom effect on this basic carousel and whether you can activate the zoom effect when the image is in the middle

code

from flet import *

from fletcarousel import BasicHorizontalCarousel


def main(page: Page):
    page.padding = 0
    page.spacing = 0
    page.rtl = True
    page.vertical_alignment = 'center'
    page.horizontal_alignment = 'center'
    carousel = BasicHorizontalCarousel(
        page=page,
        items_count=3,
        # auto_cycle=AutoCycle(duration=1),
        items=[
            Image(
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwB7MO3r19FtBqVfGOf7fuLgzmKNvXVxYN-g&usqp=CAU",
                width=300,
                fit="contain",
                height=400

                ),
             Image(
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlTUDwXZ7kX2ouPA53UZf5vmzLVXOuE-odHA&usqp=CAU",
                width=300,
                fit="contain",
                height=400


                ),
              Image(
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUtgkhOS2Av_s1GKmy4ySUBFNk6orElAUh4w&usqp=CAU",
                width=300,
                fit="contain",
                height=400
                ),
               Image(
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVZU8rzFFighij-YnSf1ZaLDupdSQWhAycSw&usqp=CAU",
                width=300,
                fit="contain",
                height=400
                ),
                Image(
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVZU8rzFFighij-YnSf1ZaLDupdSQWhAycSw&usqp=CAU",
                width=300,
                fit="contain",
                height=400
                ),
                 Image(
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvupidt5Hi7uXLvFhEscWFMUwhWGErVPEqJA&usqp=CAU",
                width=300,
                fit="contain",
                height=400
                ),
        ],

        buttons=[
            FloatingActionButton(
                icon=icons.NAVIGATE_BEFORE,
            ),
            FloatingActionButton(
                icon=icons.NAVIGATE_NEXT,
            )
        ],
        vertical_alignment=CrossAxisAlignment.CENTER,
        items_alignment=MainAxisAlignment.CENTER
    )
    page.add(
        ResponsiveRow([
            carousel
            ])
        )


app(target=main)

[naderidev]

Hi @bobwatcherx
"BasicHorizontalCarousel" isn't animated and not responsive.
I will add a new animated carousel like what you want!
but about responsive, you should use page.window_width and page.on_resize!! take look at this code:

from flet import *

from fletcarousel import BasicHorizontalCarousel


class CustomCarousel(UserControl):
    item_width: int = 300
    items_count: int = 3

    def __init__(self, page: Page, images_url: list[str]):
        super().__init__()
        self.page = page
        self.images_url = images_url

    def carousel(self):
        return BasicHorizontalCarousel(
            page=self.page,
            items_count=self.items_count,
            items=[
                Image(
                    src=url,
                    width=self.item_width,
                    fit="contain",
                    border_radius=15,
                ) for url in self.images_url
            ],
            buttons=[
                FloatingActionButton(
                    icon=icons.NAVIGATE_BEFORE,
                ),
                FloatingActionButton(
                    icon=icons.NAVIGATE_NEXT,
                )
            ],
            vertical_alignment=CrossAxisAlignment.CENTER,
            items_alignment=MainAxisAlignment.CENTER
        )

    def responsive(self, e):
        window_width = self.page.window_width
        if window_width < 600:
            if self.item_width != 400:
                self.item_width = 400
                self.items_count = 1
                self.body.content = self.carousel()
                self.body.update()
        elif window_width > 600:
            if self.item_width != 300:
                self.item_width = 300
                self.items_count = 3
                self.body.content = self.carousel()
                self.body.update()

    def build(self):
        self.body = Container(
            content=self.carousel()
        )
        return self.body

    def _build(self):
        super()._build()
        self.page.on_resize = self.responsive


def main(page: Page):
    page.padding = 0
    page.spacing = 0
    page.rtl = True
    page.vertical_alignment = 'center'
    page.horizontal_alignment = 'center'

    urls = [
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwB7MO3r19FtBqVfGOf7fuLgzmKNvXVxYN-g&usqp=CAU",
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlTUDwXZ7kX2ouPA53UZf5vmzLVXOuE-odHA&usqp=CAU",
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUtgkhOS2Av_s1GKmy4ySUBFNk6orElAUh4w&usqp=CAU",
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVZU8rzFFighij-YnSf1ZaLDupdSQWhAycSw&usqp=CAU",
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvupidt5Hi7uXLvFhEscWFMUwhWGErVPEqJA&usqp=CAU"

    ]
    page.add(
        CustomCarousel(
            page=page,
            images_url=urls
        )
    )


app(target=main)

Result:

we should use page.on_resize and when the window is resized then check the window size and update the carousel.
Unfortunately there is no method in BasicHorizontalCarousel to update the "items_count" but its possible to update items.
so we should update the whole carousel when the window is resized.

[bobwatcherx]

yes it works . but when in 2 pictures the next button on the right doesn't appear. Your solution only works if responsive is just one image. Is there a really responsive way, regardless of size, and the next button on the right still appears, I appreciate your answer, thx