Building a Feature Slider
with Graphic Overlay

We recently launched a new website for Johnston UNC Healthcare featuring a slider on the home page. Including a slider is typical, but its design includes an arch graphic that overlays the slides. This arch posed a bit of a development challenge. Since the element containing the arch image needed to be positioned on top of the slider below (the arch is a transparent PNG), it was blocking the click from getting through to any links in the info box of each slide. A possible alternative approach would have been to make the arch a part of the slide image, but I was not willing to do that. In an effort to keep sites easily maintainable and as unbreakable as possible, I avoid building in a way that requires graphic elements to be added to images before uploading them to the site.

The solution I decided on was to break up the slider into two sliders that are synced to transition at the same speed, info box and links above the arch so they're clickable, slide image below so the arch appears on top. The two sliders also need to share the pager element so they would always be in sync. I used Flexslider for the slide functionality. It's a great, feature-rich plugin developed by WooThemes. A particularly handy feature is that it allows you to sync two or more sliders using the same pager navigation. Check out the markup, relevant CSS, and scripts below that got this working.

Markup

<div class="banners">
 
    <!-- Image Slider -->
    <div id="banner" class="flexslider">
        <section class="slides">
            <article style="background-image: url(images/slide.jpg);"></article>
            <article style="background-image: url(images/slide.jpg);"></article>
            <article style="background-image: url(images/slide.jpg);"></article>
        </section>
    </div>
    
    <!-- Info Box Slider -->
    <div id="banner-captions" class="flexslider2">
        <section class="slides">
            <article>
                <div class="container">
                    <div class="slide-caption">
                        <h2>Slide Title</h2>
                        <p>Slide Info Content</p>
                    </div>
                </div>
            </article>
            <article>
                <div class="container">
                    <div class="slide-caption">
                        <h2>Slide Title</h2>
                        <p>Slide Info Content</p>
                    </div>
                </div>
            </article>
            <article>
                <div class="container">
                    <div class="slide-caption">
                        <h2>Slide Title</h2>
                        <p>Slide Info Content</p>
                    </div>
                </div>
            </article>
        </section>
        <div class="container controls"></div>
    </div>
</div>

Styles

#banner {
    position: relative;
}

/* Arch element added as a :before pseudo element on #banner. Yes, z-index: 100 is probably a bit overkill. I'm okay with that. */
#banner:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: url(../images/banner-mask.png) 50% 0 no-repeat;
}

/* Negative z-index on the slides insures the image will be below the arch */
#banner .slides {
    position: relative;
    z-index: -1;
}

/* Also z-index: 100, like the arch. Since this comes after the arch in the markup, it will stay on top. */
#banner-captions {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}

Scripts

For more information on Flexslider specifically, check out the demos and API at http://www.woothemes.com/flexslider/. It comes with it's own CSS file, but you don't have to use it.

$('.flexslider').flexslider({
	selector: '.slides article',
	controlNav: false,
	directionNav: false,
	multipleKeyboard: true
});

$('.flexslider2').flexslider({
	selector: '.slides article',
	directionNav: false,
	sync: '.flexslider',
	animation: 'slide',
	controlsContainer: '.controls',
	multipleKeyboard: true
});