Flexible Messaging Area Module

Purpose

Placeholder

Markup

    <div class="fma-container">
      <div class="fma-slide fma-first fma-active">
        <p>Slide one</p>
      </div>
      <div class="fma-slide fma-inactive">
        <p>Slide two</p>
      </div>
      <div class="fma-slide fma-inactive fma-image fma-last">
        <p>Slide three</p>
        <img class="fma-background" src="http://ualberta.ca/~publicas/uofa/img/features/feature-thrun.jpg">
      </div>
    </div>

Styling

fma-module.less

Functionality / Javascript

      $('.fma-slide, .fma-tabs li').click(function() {
        $('.fma-slide').removeClass('fma-active');
        $('.fma-slide:eq('+$(this).index()+')').addClass('fma-active');
        $('.fma-tabs li').removeClass('fma-button-active');
        $('.fma-tabs li:eq('+$(this).index()+')').addClass('fma-button-active');
        return false;
      });