FOLLOW US

Blog

These articles are in reference to our original plugin, SlideDeck 1 PRO. If you are searching for articles related to our SlideDeck 2 WordPress Plugin, please check the blog category for SlideDeck 2 or search our Knowledge Base.

How to Get 3x Leads With a Case Study Web Slider

By On March 24, 20114 Comments

So you have a stellar client list, but let’s be honest, anyone can add a logo pond to their site. If you want to convert more of your visitors into leads, you need to be transparent about how you achieved success with past clients.

Case studies are a great way to explain how you worked magic for clients and created real results. They accomplish 2 things; they educate visitors about your product or service and validate its effectiveness with social proof.

ReTargeter’s Case Study Web Slider

ReTargeter is a great example. They are an online advertising platform that enables you to market to users that have previously visited your website. The results are exponential compared to most advertising platforms. You may be thinking, “Huh? Prove it!” So building a case study web slider with SlideDeck was the perfect way to:

  1. Display ReTargeter’s impressive client list
  2. Discuss the details of each project
  3. Show exactly how the results were achieved.

In addition, the web slider format creates a fun user experience. It allows you to focus on one case study at a time and makes it easy to browse through each of them without reloading the page. The results aren’t shabby either, ReTargeter’s leads increased by 3x since they added the case study SlideDeck.

Read on to find out how we built this SlideDeck. The below example is a bit technical, so you may want to send it to your web developer if you are not a coder.

Increasing Leads - Retargeter Case Studies

How We Did It

This SlideDeck is unique because of the multiple forms of navigation. The slides are encapsulated by a black header and a primary navigation at the base. The primary navigation is an interactive logo pond. Clicking a logo causes the slider to navigate to it’s corresponding slide. Executing this interaction is the difference between a long page with paragraph after paragraph of text and an attractive feature that keeps your user engaged.

Albeit custom, the logic behind this slider is not terribly complex. Once the structure was created and flowed with content, we added a small container element that holds one linked image per case study slide (in order).  We then use the “goTo()” API function to correlate each logo with the correct slide.

This was accomplished by utilizing the index of both slides and logos. Since JavaScript indices are defaulted to start at “0”, we have to increase this integer by 1 so it represents the correct slide. Otherwise, logo_1 (Index of “0”) would link to “Slide_0” when we need it to link to “Slide_1”.

The code looks something like this:

CaseStudyLogos.goTo($('.slidedeck dd').index($('#'+casestudy_id))+1);

Notice the “+ 1” at the end of the goTo() parameter.

Taking advantage of SlideDeck’s “complete” function in the callback API allows us to check which Case Study slide is currently active. The current slide is important for updating the active logo in the logo pond. Each image is wrapped in an anchor tag with a title attribute of the company’s name. This title attribute is transfered to the overall title, further emphasizing the active slide.

Increasing Your Leads with a Web Slider - Case Study

Moreover, we have a conditional in the complete function callback that checks if the user is viewing the last slide in the SlideDeck. If true, we hide the “View Next Client” button:

if ( navs.length == slidedeck.current ) {
$('#btn_next_client').fadeOut();
}

Otherwise, we ensure that the button is visible:

else {
$('#btn_next_client').fadeIn();
}

Feel free to explore this SlideDeck more closely and learn how we were able to accomplish the custom interaction. You can find the page here as well as additional custom JavaScript included here. The case study slider is an excellent example of how to take advantage of SlideDeck’s powerful API features to create unique interaction.

Have a cool web slider of your own? Show us your work in the comments below.

Leave a Reply

Comments (4) Responses

  1.  

    Joanne Scara

    Great case study slide show. Would be nice to include a “click to view live site”. Would be nice to have a “gallery” within a “gallery” so you could click through different pieces of art that supported each case study.

  2.  

    Web Templates

    thanks alot it help me so much

  3.  

    Jason Keath

    Looks very slick. Needs a “previous” button. You get stuck at the end. Maybe a call to action slide as the last page would work, but a nice call the action under each case study would be nice too. “Like what you see? Get in touch and find out what we can do for you?”

    Very nice design, very fluid code.

    •  

      Dairien

      Thank you for taking interest. You make excellent points, there is certainly room for additional navigation and even a call to action. I will be sure to consider your suggestions when revisiting the site.