Embedding a Carousel inside a TabbedPanel

Mathieu Virbel edited this page Sep 27, 2013 · 1 revision

Embedding Carousel in a TabbedPanel


  • author: Qua-non
  • kivy: >= 1.6.0

The idea of this snippet is to embedd and link the Carousel to a TabbedPanel. Here we::

  • Add the Carousel to the TabbedPanel
  • Store a tab ref in every slide
  • Ask Carousel to change the Slide in TabbedPanels switch_to method.
  • *Ask TabbedPanel to change the tab in Carousels on_index method *
from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.properties import ObjectProperty
from kivy.lang import Builder

    carousel: carousel
    do_default_tab: False
        on_index: root.on_index(*args)
        id: carousel
            text: 'Slide one'
            tab: tab1
            text: 'Slide Two'
            text: 'Slide three'
            tab: tab3

        id: tab1
        text: 'tab1'
        slide: 0
        id: tab2
        text: 'tab2'
        slide: 1
        id: tab3
        text: 'tab 3'
        slide: 2

class RootWidget(TabbedPanel):

    def on_index(self, instance, value):
        tab = instance.current_slide.tab
        if self.current_tab != tab:

    def switch_to(self, header):
        # we have to replace the functionality of the original switch_to
        self.current_tab.state = "normal"
        header.state = 'down'
        self._current_tab = header
        # set the carousel to load  the appropriate slide
        # saved in the screen attribute of the tab head
        self.carousel.index = header.slide

class MainApp(App):

    def build(self):
        return RootWidget()

if __name__ == '__main__':

##Comments add your comments here...

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.