OnSen UI Sliding Menu not appearing

Question

I have a full page carousel. On the last carousel item I have a button to go to another page where I have the Sliding Menu. However, the sliding menu doesnt appear/show on this page. My code is as below

<ons-navigator title="Navigator" var="appNavigator">
  <ons-page>      
      <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
        <ons-carousel-item style="background-color: gray;">
          <div class="item-label">GRAY</div>
        </ons-carousel-item>
        <ons-carousel-item style="background-color: #085078;">
          <div class="item-label">BLUE</div>
        </ons-carousel-item>        
        <ons-carousel-item style="background-color: #D38312;">
          <div class="item-label">ORANGE</div>
          <ons-button modifier="outline" onclick="appNavigator.pushPage('home',{animation: 'lift'})" id="getStarted">Get Started</ons-button>
        </ons-carousel-item>
        <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
      </ons-carousel>
  </ons-page>  

  <ons-sliding-menu
                  main-page="home"
                  menu-page="menu"       
                  side="left"
                  max-slide-distance="250px"
                  swipe-target-width="25px"
                  var="menu">
  </ons-sliding-menu>

  <ons-template id="menu">    
      <ons-list>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('home', {closeMenu: true})">
          Settings
        </ons-list-item>      
      </ons-list>    
  </ons-template>

  <ons-template id="home">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="menu.toggleMenu()">
              <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Welcome</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Home Page Contents</p>
    </ons-page>
  </ons-template> 

</ons-navigator> 

I saw this option and kept the sliding menu outside the navigator but no effect. Can you please help me out with this.

Answer 1

In order to have a sliding-menu inside a page you have to make an ons-page for the sliding-menu itself and call it. Just put your 'ons-sliding-menu' inside 'ons-template' and 'ons-page' like this:

    <ons-template id="slidingmenu">
       <ons-page>
           <ons-sliding-menu
                      main-page="home"
                      menu-page="menu"       
                      side="left"
                      max-slide-distance="250px"
                      swipe-target-width="25px"
                      var="menu">
           </ons-sliding-menu>
       </ons-page>
    </ons-template>

And of course, you have to call this sliding-menu-page instead of the final "home" page from your carousel's button:

 <ons-button modifier="outline" onclick="appNavigator.pushPage('slidingmenu',{animation: 'lift'})" id="getStarted">Get Started</ons-button>

And it would be better to put the templates (including the sliding-menu) outside the main navigator, so you only have one main element in the page. It's working here. Hope it helps!