How to connect carousel with navigation bar in kivymd? - kivy

Question

I am making an app in kivymd where there is a bottom navigation bar with three bottom nav elements(home, plus, profile). I want That on pressing home a carousel with a three line avatar list get's shown. But if a write my code under navigation element (home) it sort of comes in middle. And if I write the code inside main boxlayout the content of other buttons comes underneath.
following is my code with code under nav element being commented:
from kivymd.app import MDApp
from kivy.core.window import Window
from kivy.lang import Builder
Window.size = (375, 667)
kv = """
BoxLayout:
orientation:'vertical'
padding: 0
MDToolbar:
title: "Ad 'O Square"
md_bg_color: 1, 1, 1, 1
specific_text_color: app.theme_cls.accent_color
elevation: 10
Carousel:
direction: "right"
Image:
source: "Colors/red.jpg"
Image:
source: "Colors/green.png"
Image:
source: "Colors/blue.png"
ThreeLineAvatarListItem:
text: "Product 1"
secondary_text: "Short Text"
tertiary_text: "Rating"
ImageLeftWidget:
source: "Colors/red.jpg"
ThreeLineAvatarListItem:
text: "Product 2"
secondary_text: "Short Text"
tertiary_text: "Rating"
ImageLeftWidget:
source: "Colors/blue.png"
ThreeLineAvatarListItem:
text: "Product 3"
secondary_text: "Short Text"
tertiary_text: "Rating"
ImageLeftWidget:
source: "Colors/green.png"
MDBottomNavigation:
panel_color: 1, 1, 1, 1
MDBottomNavigationItem:
name: 'screen 1'
text: 'home'
icon: 'home'
# Carousel:
# direction: "right"
# Image:
# source: "Colors/red.jpg"
# Image:
# source: "Colors/green.png"
# Image:
# source: "Colors/blue.png"
# ThreeLineAvatarListItem:
# text: "Product 1"
# secondary_text: "Short Text"
# tertiary_text: "Rating"
#
# ImageLeftWidget:
# source: "Colors/red.jpg"
#
#
# ThreeLineAvatarListItem:
# text: "Product 2"
# secondary_text: "Short Text"
# tertiary_text: "Rating"
#
# ImageLeftWidget:
# source: "Colors/blue.png"
#
#
# ThreeLineAvatarListItem:
# text: "Product 3"
# secondary_text: "Short Text"
# tertiary_text: "Rating"
#
# ImageLeftWidget:
# source: "Colors/green.png"
MDBottomNavigationItem:
name: 'screen 2'
icon: 'plus-circle-outline'
MDLabel:
text: "Screen 2"
halign: "center"
MDBottomNavigationItem:
name: 'screen 3'
text: 'profile'
icon: 'account'
MDLabel:
text: 'Profile'
halign: 'center'
"""
class App(MDApp):
def build(self):
self.theme_cls.accent_palette = "Red"
screen = Builder.load_string(kv)
return screen
if __name__ == '__main__':
App().run()
this is the output
and this is the output when I write the code inside bottom navigation element