Carousel

Documenting how this should work.

• 100% of the width of its parent container, adapts to any sized container.
• Controls can be above, below, or right/left.
• Items width must be set in pixels (they can’t be %, no way to inherit container width from parent’s parent)
• Ideally it would not have half-items visible, in JS remove the extra bit or expand the units to fill more space?

Brainstorming common markup using the html5 syntax.

tabs

  



    



      
Tab 1


      
Tab 2


      
Tab 3


  
 Content Area 
  
 Content Area 
  
 Content Area 

toggle block

<div class="section toggle">
  <div class="control">
    <h1>Clicking on me toggles the display of the content area</h1>
  </div>
  <div class="details open"> Content Area </div>
</div>

Carousel

  
 radio buttons for section and buttons for left/right or top/bottom scroll 


  
 Content Area 

h2. Accordian

  



    



      
Clicking on me opens the adjacent accordian content area

    
 Content Area 



      
Clicking on me opens the adjacent accordian content area

    
 Content Area 



      
Clicking on me opens the adjacent accordian content area

    
 Content Area