FMA Module Image Slider

WIKI PAGES MAY BE OUTDATED, USE MARKUP / SOURCE FROM THE DEMO

Purpose

The FMA image slider is used to showcase 1 to 3 large images with a caption.

Demo

Markup

• The markup for the fma image slider

    <div class="fma-container image-slider">
      <div class="fma-slide fma-first fma-active">
        <a href="#fma-link">
          <img class="fma-background" src="#slide-image">
        </a>
        <div class="fma-caption">
          <h3>Slide title</h3>
          <p>Slide description</p>
        </div>
      </div>
      <div class="fma-slide fma-inactive">
        <a href="#fma-link">
          <img class="fma-background" src="#slide-image">
        </a>
        <div class="fma-caption">
          <h3>Slide title</h3>
          <p>Slide description</p>
        </div>
      </div>
      <div class="fma-slide fma-inactive fma-image fma-last">
        <a href="#fma-link">
          <img class="fma-background" src="#slide-image">
        </a>
        <div class="fma-caption">
          <h3>Slide title</h3>
          <p>Slide description</p>
        </div>
      </div>
  

Styling

• Mobile styling still required
  • Is swipe between possible?

Functionality / Javascript

• This Javascript should be added before the </body> tag, or included in an external file.

• An FMA plugin should be made in the future when time allows.

      (function($) {
        $(document).ready(function() {
          $('.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;
          });
        });
      })(jQuery);