BasicCarousel not Responsive and How to change animate like slide effect
bobwatcherx opened this issue · comments
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)
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)
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.