title: How to add carousel (small size ) on top of another carousel
body: <p>//here is my carousel view which display some images on carousel code is below</p>
  
  <pre><code>Ext.define("App.view.GView", 
  {
      extend:'Ext.Carousel',
      xtype:'GView',
      requires:[
          'Ext.carousel.Carousel',
          'Ext.Img',
          'Ext.Loader'
      ],
  
      config:{
          title:'XYZ',
          iconCls:'home',
          layout:{
              type:'vbox',
              pack:'center',
              align:'center'
          },
          directionLock:true,
          fullscreen:true,
          items:[
              {
                  docked:'top',
                  xtype:'titlebar',
                  cls:'titleBar',
                  title:'Gallery'
              }
          ],
  
          xtype:'carousel',
          id:'gallerycarousel'
      }
  });
  </code></pre>
  
  <p>//Here is my controller code which binds data to </p>
  
  <pre><code>    var items = []; Temp array
      var xyz= [{ urlL}] My image array
  
      Ext.each(images, function (picture) {
      items.push({
              xtype: 'image',
               cls: 'centerImage',
               src: picture.url
             });
       });
      floorCarousel.setItems(items);
      floorCarousel.setActiveItem(0);
  </code></pre>
  
  <p>//My question is to how to add another carousel on the top this carousel that when i move first carousel item than second carousel item also should move and vice verse.. So first carousel is at bottom on top of that i need small size carousel Please help me out little tricky .,,</p>