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 Build a Conference Website with a Web Slider

On April 5, 20116 Comments

Conference websites are a challenging undertaking.  How do you successfully communicate your event theme, experience and speakers while selling the venue out?

The key is simplicity. This post will show you how to use a SlideDeck to provide a seamless user experience that enables visitors to get a clear idea of your event and sign up with ease.

The Summit Series events have incredible speakers such as Bill Clinton, Richard Branson and Russell Simmons.  So for the upcoming event, the Summit team wanted to give users an exciting way to explore the conference as a whole while delivering the intimate details of each speaker. In order to avoid a long page of content for the user to filter through, we packaged the speakers within their appropriate “pillar” such as Innovation or Revelry. This provided a simple navigation that allowed the user to explore the speakers in detail while relating them to the overall theme and experience of the event. The result is a sold out event after just a few weeks of the website being live.

Summit Series SlideDeck - Building a Web Conference

How We Did It

The SlideDeck features a single spineless horizontal SlideDeck with multiple slides. It makes use of 2 forms of navigation; both external to the SlideDeck and both making use of some API commands. These include the previous and next arrows found to the left and right of the SlideDeck, as well as the bullet navigation below the SlideDeck.

In addition to the external navigation, an information modal for each attendee has been integrated with this SlideDeck content to allow for more information to be presented when requested.

Below I get a little more technical, though not code heavy, with the different aspects of this SlideDeck and JavaScript interaction. Some of these features are not visible or presented on the current Summit at Sea deck at this time, as it has changed.

Features in this SlideDeck

Summit Series External Nav - Building a Web Conference with SlideDeckExternal Navigation – The previous and next buttons are positioned outside the SlideDeck and use the .prev() and .next() API commands, these are bound to the click event for these buttons. We also make use of the SlideDecks callback API, on complete of an animation/slide we check to see if the user is on the first or last slide of the SlideDeck. If on the first slide, we add a class of disabled to the Prev button, which has a CSS rule of display:none; assigned to it, this visually hides the button. If the user is on the last slide we add a class of disabled to the Next button, and hide it. If the user is on neither the first nor last, we make sure that the disabled class is removed.

Summit Series Bullet Nav - Building a Web Conference With SlideDeckThe bullet navigation is a custom built dynamically generated navigation that calculates the number of slides in the SlideDeck and creates, binds the JavaScript events for navigating the SlideDeck, and then outputs this built and bound navigation to the page. We are using the .goTo(int) command to navigate to the correct slide, we check the index position of the bullet nav element clicked on, then increase this value by 1(since index values start at 0 and slides references start at 1), we then fire the .goTo(int) command, where int is equal to the index position + 1. Let’s say there are 3 slides, the navigation would be built with 3 bullets. These 3 bullets indices in order would be 0, 1, and 2. But our slides are numbered in order 1, 2, and 3. So we need to increase the value of the index by 1 to have it equal its corresponding slide.

Here we are also taking advantage of the complete callback to update the active state of these bullets when the SlideDeck animates.

Nested Decks – Nested decks can be tricky things, these really only work consistently with the standalone jQuery version of SlideDeck, as you have more control over your initiation and structure of the deck. The biggest thing to remember is that each SlideDeck needs to have a unique ID assigned to it, so you can initiate and interact with this SlideDeck and not interfere with the others when doing so.

How does this look? Well for Summit at Sea, the original build had 1 main SlideDeck, which we assigned the ID of main_slidedeck. We then had the panel deck with ID panel_deck and the attendee deck with ID attendee_deck assigned. For each of these SlideDecks we initiated them by their IDs and assigned these initiations to a JavaScript variable so we could reference them later on if needed.

ex:
var mainDeck = $(‘#main_slidedeck’).slidedeck({ hideSpines:true  });
var panelDeck = $(‘#panel_deck’).slidedeck();
var attendeeDeck = $(‘#attendee_deck’).slidedeck();

These create an instance of the SlideDeck for each separate deck that we can then manipulate independently if needed. One thing to keep in mind is that you want to be very rigid in your CSS so that your nested SlideDecks do not inherit the parent deck’s styles, you can also write some CSS overwrites to handle any inheritance issues that may arise.

Info Modal Integration – We used a tool called FancyBox to create the modals for the information popups for each attendee. This is not SlideDeck related, but it shows you can use other JS libraries/tools and integrate them into your SlideDecks as well to make them more robust.

Hopefully you found this walk-through useful and that it expands your view on what SlideDeck is capable of. Please feel free to post comments or visit our SlideDeck forum.

Leave a Reply

Comments (6) Responses

  1.  

    mando

    Is there a way this can be a vertical slider?

    •  

      Jamie

      Using the jQuery version of SlideDeck, you can lay out any number of decks any way you want, so yes. If you wanted it to be vertical, you can build it that way.

  2.  

    Leslie

    I’m interested in using a custom SlideDeck like this one for my portfolio website. While I have a handle on CSS, I’m new to JavaScript and JQuery. I am looking into purchasing SlideDeck Pro, but would need some help customizing it to appear like the Summit Series deck.

    Any advice or support you can offer?

  3.  

    Chuck

    Thanks for the heads up. They just reverted to their corporate site. Here’s the conference URL: http://sea.summitseries.com/

  4.  

    Shruti

    This is a great use of the Slidedeck for the events and conferences. The speakers and events information could be presented very effectively using slide deck and we, at New England New Media, are proposing it for one of our clients.

    I went to summitseries.com website and could not locate the above mentioned conference site. Could you please give me that URL?

    Thanks!