What is this?
Required modules
A Slideable content type
The View
CSS

What is this and how did we do it?

This page and its neighboring tabs display one of the many animated slide show effects of Views Slideshow, a module that makes the many transitions of malsup's jQuery Cycle library available as presentation styles in Views.

As you click from tab to tab the transitions to the new content are animated in a visually attractive fashion.

As the name suggests, Views Slideshow is targeted at displaying a series of photographs that fade, curtain, flip, shuffle etc. every few seconds thus rotating like a carousel of slides.

However, at flink we felt that this effect may also liven up those otherwise somewhat dull pages of pure text on your site. Navigation on this page is, as per normal, i.e. by mouse-clicking the tabs. But there's nothing stopping you from also auto-rotating the tabs like a carousel -- it's a simple setting on the Views UI! When auto-rotation is on, the user can linger on a page and interrupt the cycle simply by hovering the mouse into the content area -- cool or what?

To implement the above, we created a simple custom content type and five pages (tabs) of content. We then configured a slide View to cycle through the content. Finally we added a few lines of CSS to create the tabs, combining the animated slide effect with traditional navigation.

The neighboring tabs on this page detail how it was all done.

Required modules

To create slideshows similar to the one running here, you need to download and enable the following D7 modules:

You will also need to download the file jquery.cycle.all.min.js, which is part of the jQuery Cycle plugin, downloadable here. Place the file in directory ..../sites/all/libraries/jquery.cycle. The Views Slideshow module will give you a clear error if it cannot find this file. There is a second optional plugin, json2.js, which has additional advanced effects, which you may also want to download this file. It needs to go in directory ...sites/all/libraries/json2. This is also clearly explained with relevant download links as you start configuring the Views Slideshow module.

Creating a Slideable content type

The Views Slideshow module presents itself in the Views UI as a new style setting. When creating a view you'll find that in addition to Grid, Table, Unformatted etc. there's a new style, Slideshow. Select this and you have an instant slide show on your site. That's a pretty cool feature for so little effort. Problem is you now have an instant slide show of all of the content on your site -- that's perhaps a bit much. So we need to find a way to only display those few pages of content that want to bring together under a handful of tabs. An easy way to this is to create a new custom content type, let's call it Slideable. Then we can filter our View by this content type. While we're there, let's also so create a field "Slide number" so that we can 1) order the slides (tabs) by sorting the View and 2) use the same content type for slideshows on other pages, by filtering the View by slide number range. So in summary: Structure >> Content types >> Add content type to create a content type Slideable. Add fields "Slide number" (Integer), "Slide label (for tab)" (Text). "Body" (Long text) should already be there. By all means add as many other fields as you like, including image fields. Then create the slides Add content >> Slideable. Next: connecting your slides together under a row of tabs.

Creating the View

With the content type Slideable in place creating the View is now pretty straightforward. You can create it as a Page or as a Block display, either is fine.

The Defaults will typically include the following.

Style settings:
  Style: Slideshow
  Row style: Fields

Fields
  Fields: field_slide_number (Excluded from display)
  Fields: field_slide_label (Excluded from display)
  Node: title
  Fields: field_body

Sort criteria
  Fields: field_slide_number asc

Filters
  Node: Type = Slideable
  Fields: field_slide_number between 1 and 5

Now all we have to do is configure the Style: Slideshow settings.
Click the cog wheel and pick the transition effect you like best. For now accept the defaults, except perhaps the Timer delay, which you may want to set to 0 to stop auto-cycling through the slides.
The crucial section is Top widgets. Tick Pager, then under Pager Type, select Fields and tick Fields: field_slide_label.
Press Update and Save.

That's it! Your can now either manually or automatically cycle through your slides with the selected transition effect.

One caveat.... the pager "tabs" are stacked vertically and don't look like tabs. We'll fix that next.

The CSS

To format the slide pager into tabs, we add a few lines of CSS. Some themes accommodate a special place, like a local.css file for you to add these. Alternatively, create a subtheme or as a quick hack, just append them to the style.css file of your theme.
Change colours, fonts and borders to your heart's content.
Enjoy!

/*--- Views Slideshow tabs ---*/

.views-slideshow-controls-top {
  font-weight: bold;
  color: grey;
  border-bottom: 2px solid grey;
}
.views-slideshow-pager-field-item {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  border-top: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
}
.views-slideshow-pager-field-item:last-child {
  border-right: 1px solid lightgrey;
}
.views-slideshow-pager-field-item.active {
  color: white;
  background-color: grey;
  border: 1px solid grey;
}