Slideshow with text

Yes it can. You'll need to use css to move yoru text above. Something like margin-top: -100px for the text. So output the image first and then the text. Then use css in your theme to move the text into the image area.

Hope this helps.

Hi saepl,
Were you able to achieve what you wanted? Are you willing to share how?
I'm going crazy with the same stuff

I built the rotator on twoshirts.org and that actually uses http://drupal.org/project/views_rotator . However, I just did a new one using Views slideshow over at http://stjohnswestbend.org and it was even easier.

The key is the css position attribute. Set your main image section to position: relative, then your text rows to position: absolute...then position wherever you want.

Good luck!

The slideshow at stjohnswestbend is awesome. Currently I am using ddblock which is a nightmare to get to work and moreover a total screw up with fusion based themes.

I am trying to recreate Rob's great effort but I am unable to get the text as overlay of the picture. Don't even want the pagerpictures to the left. They can stay at under the main slide. Currently I have the slide and the pagerpictures and between them the text of my "pager text"-field.
I am using firebug but seemingly getting lost constantly.
Is there a chance anybody has some kind of tutorial at hand or is willing to provide one? I am not a grandmaster with CSS but very eager to learn. So any additional help would be awesome.

You could get this from firebug, but this may be easier (and hopefully helpful since if you named your View "homepage_rotator" you should be able to just drop this in). Combine this with a proper imagecache setting and you're good to go. Here's the css code for the slideshow currently on the homepage of http://StJohnsWestBend.org (courtesy of http://mustardseedmedia.com of course :)

Your classes and IDs should be the same as what's shown here so go thru the code and look at your markup to see how it works.

/* HOMEPAGE SLIDESHOW */

#block-views-homepage_rotator-block_1	{
	position: relative;
	float: right;
	width: 585px;
	height: 375px;
	overflow: hidden;
}

#views_slideshow_singleframe_main_1	{
	position: relative;
}

#views_slideshow_singleframe_main_1 .slideshow-text-bg	{
	position: absolute;
	height: 90px;
	width: 500px;
	background-color: #45392A;
	left: 0px;
	bottom: 1px;
	filter:alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity:0.7;

}

#views_slideshow_singleframe_main_1 .slideshow-text	{
	position: absolute;
	height: 70px;
	width: 480px;
	color: #fff;
	left: 0px;
	bottom: 1px;
	padding: 10px;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
}

#views_slideshow_singleframe_main_1 .slideshow-title	{
	font-weight: bold;
	font-size: 1.2em;
	color: #fff;
}
#views_slideshow_singleframe_main_1 .slideshow-more a	{
	color: #CFC2A1
}


#views_slideshow_singleframe_pager_1	{
	position: absolute;
	top: 0px;
	right: 0px;
}

#views_slideshow_singleframe_pager_1 .pager-item	{
	display: block;
}

#views_slideshow_singleframe_pager_1 div a img	{
	width: 80px;
	height: 71px;
}

Oh, and I'm still building this, so if the code is sloppy...well...too bad :)

subscribing

@ Bob

Thx a million. I am still not comfortable with firebug and css changes so your code can be as sloppy as Pig Pen - it helps me a lot. I've watched most of your videos and now you have helped me again. If you ever visit Cologne I'll buy you a beer. ;)

@dddave, @Rob_Feature

Hello to all here...

May it´s possible to work with imagecache, doing a preset for the slideshow.
Using the imagecache addons (actions..), you may could overlay the dark part of the picture and combining it with Token you could put for example the node-titel into the darkt part of the picture. Isn´t it?

Mmh, never thought of this possibility. Might be worth a look...

I've actually used imagecache actions to write the text on a number of projects. I have to say that after lots of experience there, I'm going to start using this CSS method more instead. There are 2 reasons CSS is better (at least for me):

1. SEO: By using html text/css search engines can actually read your banners...this is a good thing.
2. Site manageability: when using imagecache actions, it's creating actual images, then caching them. This means that if a client of mine creates a banner image/node, then later wants to go back to change the text on that image, they get confused. What happens is they change the node then I get an email saying "why isn't the banner updating?" Then, i have to teach them how to flush imagecache...and that's not something people should be touching.

So, while imagecache actions is possible...I find that CSS has given me a much better answer to this problem.

@Rob_Feature

1. That´s true.

2. For the manageability, it´s possible to use a CCK Field, wich you call "Text for banner" and to set up this for the picture. So the user don´t get confused and do not change the node name.
At the same time, you got the possibility to use the banner for the latest 5 news automatically. I don´t know if this will work with your html/css solution too.

I am trying hard to create a slightshow like the one discussed above but so far I only get it by "cheating". I am using the css stuff provided by rob but can only apply it to one field. My problem is that I am pretty unable to insert the needed divs (slideshow-text and slideshow-text-bg). As far as I understand it I have to use a custom views template for the row style output, don't I? But where the heck do I "integrate" those divs? I watched the great video over at mustardseed but really hitting a brick wall.

btw: When I finally get it to work, I am going to provide a tutorial. Promised!

I've been to play around with that.

With this code I'm getting somewhere but not yet where I'm trying to get...

Posting it, if it may help.

Also, please have a look at http://kofiannanfoundation.org/ is this using Views Slideshow ?

#views_slideshow_singleframe_main_1.viewsSlideshowSingleFrame-processed  
{margin-left: 30px; }

#views_slideshow_singleframe_teaser_section_1.views_slideshow_singleframe_teaser_section
{ position: relative;
width:943px; 
height:300px;
overflow: hidden;}

.views-field-body
{ position: relative;
opacity: 0.7;
margin-top:-45px;
}

Hey Rob or anybody else,

On the slideshow for the site http://stjohnswestbend.org that you made, How did you get the text on the image to not inherit the transparency of the background that you set at "opacity:.7;". I tried to duplicate what you did with that, but still my text ends up inheriting that transparency, and shows up very light even though it's supposed to be "white".

Here is a sample of what I did. http://mamaroberta.com/drupal/views-slideshow

What do you think?

Dan

@dandolino
Note the HTML for the slideshow on http://stjohnswestbend.org and you'll see how it works....I made the background an empty div that's OUTSIDE the div containing the text and is positioned absolutely...then I set it's transparency. If it's not outside the text div, the text will inherit the transparency.

I think we have some good solutions here. Marking as fixed.

Great info!

Rob, thanks for the info.

Hey All,
Watch this method in action on a video podcast I did over at: http://mustardseedmedia.com/podcast/episode42

Hope it helps!

Thanks Rob for the podcast. I've got it running on a local site and was wondering if there was a way to add a new pager option. I'd love to use just a simple bullet as the pager but I'm having trouble trying to get it to work correctly and display bullets for all 4 images in the slideshow.

@dawiyo

Creating a bullet style pager can be acheived with some simple css. You will leave the pager as a standard numbered pager.

You basically just need some css to hide the pager numbers and replace them with the appropriate bullet background.

ul.slideshow-pager li a  {
  background:url("images/pager-bullet.png") no-repeat scroll 0 0 transparent;
  display:block;
  height:10px;
  width:10px;
  text-indent:-9999px;
}

Study the code at http://kofiannanfoundation.org/ for more details.

Speaking of pagers, I would love to have another pager option added ... so that the pager could display text (perhaps the title field). This would make it possible to create nice looking tabs to navigate between the slides. It would be ideal if I could select the field(s) to include in the pager from the list of fields set in the view. That way you could do cool things like display the title along with a short date field for events or you could display the node title along with a comment count to help entice users. This flexibility would accommodate many fringe use cases.

@MikeyLikesIt have you used Thumbnailhover? That's what that does.

Thank You Rob, I watched your video and left a comment as well. I was able to achieve what you showed in the video, but can you tell me how to put the thumbnails pager on the right side of the image instead of bottom. Thank You.

alrite i was able to put the thumbnails on the right side, but they only show up correctly in FF, chrome and safari. they don't show up correctly in IE for some reason, is there anyway i can fix that?

Des Raaj without a site to look at it's going to be impossible to tell you what the problem is. If I was going to take a guess I would say that with padding and margins ie makes your main frame too wide and your thumbnails are wrapping. But again that's just a guess. Please open a new issue if you continue to have problems.

I can't get the pager to show up as a UL...any ideas? Sorry the site isn't live, I'm working on my localhost.

Clint Open a new issue

Total newbie question, but what file do you add the css to?

Any one of your themes files. Look at whatever theme you are looking for and there is probably a style.css you can add it to.

I know this is an old thread but I been trying to find a way to do this for a month before stumbling on the video by Rob_Feature over at: http://mustardseedmedia.com/podcast/episode42. I am still not able to make it work. I created 4 test nodes and only added a picture and title. I then set up a view to display the node type I set up. I now have a view with that rotates 4 images but I cannot figure out how he got the 4 images under the larger image as shown on the video.

I am also unable to find node: teaser or node:title as shown in the video. I am using views slideshow 7.x-3.0 on drupal 7.10. I am not a drupal master by any means but I learning quickly and I am grateful for all the help I get on the forums.

The 'images under the larger image' are pager thumbnail images.

1. Create image styles for your pager thumbnail images at admin/config/media/image-styles/list.
2. In your View, you must add two instances of the image field to your View (one for the larger image display and one for the pager thumbs). Do this before you configure the View slideshow format styles.
3. Configure the Slideshow format styles:
4. Under Format, click the Settings for the Slideshow format
5. Under the Widgets section of the Style Options, check Pager under the 'Bottom Widgets' section.
6. In the Bottom Widgets options section, set Pager types to Fields then, right under that, select the image field that you want to be your pager (if you added two instances of the image field, you will see both instances here, select the 2nd instance. This will be the instance that you will apply your image style pager thumbnail style to).
7. Click Save to return to the View's main edit page.
8. Under the Fields Section, Configure the 2nd instance of image field to use the pager thumbnail style you created above.

Wrote this up quickly, hope it helps and not too confusing.

@rwilson0429

I have a slideshow set up and working but now when I go to rewrite output and do the

I have a slideshow set up and working

Just to be certain I understand, before you do a rewrite of the teaser field, your slideshow functions properly with a main image and image thumbnails are shown for the pager as expected.

Assuming my understanding is correct, when troubleshooting problems, I always like to start with the obvious first. So, make sure that you haven't mistakenly clicked the 'Exclude from Display' on your image field. The only fields that should be excluded from display are the Title, Teaser and, Read More Link. These three fields will be shown in the Rewrite Results for the Teaser field.

Also, make sure you are not putting your Rewrite on the Image field.

rwilson0429 one of the problems is that I cant even find a teaser field anywhere to pick. I am beginning to feel pretty stupid because I cant seem to locate it anywhere. You can see the site here http://www.scouttroop210.org/user the sample slideshow I have set up is only two slides right on the home page.

username and password are both demo

@scampbell70
Ok, maybe you setup your slideshow to show 'Fields' instead of content. No problem, fields are probably better because you have more control of what and how your information is displayed.

I visited your link, it looks like you will need to add your image field again to the Fields section of the view . Basically, the image style of your second image field will need to be set to thumbnail or a custom image style that you define at admin/config/media/image-styles. So, the list under your View's Fields section will be something like: content:title [optional], content:image, content:image.

Based on what I see on your home page, the only thing you need to do is add the same image field again to your Fields display and set it to the appropriate image-style (I use a custom style that is scaled to 40px x 40px for my pager images). After adding the 2nd image field and applying the appropriate styles, you will need to configure the pager on your Slideshow Settings link. Under the Slideshow Settings, set your Pager type to 'Fields' then, right under that, select the image field you want to use as your pager.

Correct I have it setup as fields. I have thumbnails but excluded them from the view. I turned them back on and here is a screenshot of the view admin panel if it helps

http://scouttroop210.org/img/view.png

You can still go to the site with the demo account

@scampbell70, Assuming you are using D7, Views3 and Views slideshow 7.x-3.x, you can try to import the following Slideshow view. To import: copy the code below, create a new view and select the Import link on the View configuration page then, paste the code into the import area.

Besure to change the fields, and filter criteria to your specific needs. BTW, you would only exclude the image field if you were rewriting the output. Once you get your view setup properly then, you can deal with the rewriting and positioning of the output as outlined in the video.

$view = new view;
$view->name = 'clone_of_gallery';
$view->description = 'Picture galleries view';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Clone of Gallery';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Gallery';
$handler->display->display_options['use_ajax'] = TRUE;
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '5';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['pager']['options']['id'] = '0';
$handler->display->display_options['pager']['options']['expose']['items_per_page_options_all'] = 0;
$handler->display->display_options['style_plugin'] = 'slideshow';
$handler->display->display_options['style_options']['slideshow_type'] = 'views_slideshow_cycle';
$handler->display->display_options['style_options']['slideshow_skin'] = 'default';
$handler->display->display_options['style_options']['skin_info'] = array(
'class' => 'default',
'name' => 'Default',
'module' => 'views_slideshow',
'path' => '',
'stylesheets' => array(),
);
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_pager']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_controls']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_controls']['type'] = 'views_slideshow_controls_text';
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_slide_counter']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_pager']['enable'] = 1;
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_pager']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_controls']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_controls']['type'] = 'views_slideshow_controls_text';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_slide_counter']['weight'] = '1';
$handler->display->display_options['style_options']['views_slideshow_cycle']['timeout'] = '5000';
$handler->display->display_options['style_options']['views_slideshow_cycle']['speed'] = '700';
$handler->display->display_options['style_options']['views_slideshow_cycle']['delay'] = '0';
$handler->display->display_options['style_options']['views_slideshow_cycle']['start_paused'] = 0;
$handler->display->display_options['style_options']['views_slideshow_cycle']['remember_slide_days'] = '1';
$handler->display->display_options['style_options']['views_slideshow_cycle']['items_per_slide'] = '1';
$handler->display->display_options['style_options']['views_slideshow_cycle']['wait_for_image_load_timeout'] = '3000';
$handler->display->display_options['style_options']['views_slideshow_cycle']['cleartype'] = 0;
$handler->display->display_options['style_options']['views_slideshow_cycle']['cleartypenobg'] = 0;
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['row_options']['hide_empty'] = 0;
$handler->display->display_options['row_options']['default_field_elements'] = 1;
/* Field: Content: Picture Gallery */
$handler->display->display_options['fields']['field_pictures']['id'] = 'field_pictures';
$handler->display->display_options['fields']['field_pictures']['table'] = 'field_data_field_pictures';
$handler->display->display_options['fields']['field_pictures']['field'] = 'field_pictures';
$handler->display->display_options['fields']['field_pictures']['label'] = '';
$handler->display->display_options['fields']['field_pictures']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_pictures']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_pictures']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_pictures']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_pictures']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_pictures']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_pictures']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_pictures']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_pictures']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_pictures']['settings'] = array(
'image_style' => 'large',
'image_link' => '',
);
$handler->display->display_options['fields']['field_pictures']['group_column'] = 'fid';
$handler->display->display_options['fields']['field_pictures']['group_rows'] = 0;
$handler->display->display_options['fields']['field_pictures']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_pictures']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_pictures']['delta_first_last'] = 0;
$handler->display->display_options['fields']['field_pictures']['field_api_classes'] = 0;
/* Field: Content: Picture Gallery */
$handler->display->display_options['fields']['field_pictures_1']['id'] = 'field_pictures_1';
$handler->display->display_options['fields']['field_pictures_1']['table'] = 'field_data_field_pictures';
$handler->display->display_options['fields']['field_pictures_1']['field'] = 'field_pictures';
$handler->display->display_options['fields']['field_pictures_1']['label'] = '';
$handler->display->display_options['fields']['field_pictures_1']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_pictures_1']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['hide_alter_empty'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_pictures_1']['settings'] = array(
'image_style' => 'thumbnail',
'image_link' => '',
);
$handler->display->display_options['fields']['field_pictures_1']['group_rows'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_pictures_1']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['delta_first_last'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['field_api_classes'] = 0;
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 0;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
'picture_gallery' => 'picture_gallery',
);

@rwilson0429 that you for the info I am sorry I havent got to try it yet and get back to you but I will asap. I was down with a nasty bug and I am an full time college student and the semester just started back up, so I been stretched thin.

Another method is just to put the image as the first row, then set

.view-field-field-image { /* or what ever the appropriate field wrapper class is */
    height: 0;
    overflow: auto;
}

You might also need a z-index, and still need to set the height of the parent row and block. Not sure how browser compatible it is..

This maybe and probably is a dumb question. Which css are we adding this code to?

There is Viewslide_slideshow.css or depending --if using views slideshow Xtra-- views_slideshow_xtra.css in addition to a bazillion other css in drupal and the default theme,

@drupaljohngo, I don't think it's a good idea to change the module styles unless you know what you are doing. It's probably better to over-ride the module style sheets by putting your custom css code in your sub-theme's main style sheet or create a custom style sheet, add it to your sub-theme and put the custom css there. If you have a styles.css in your sub-theme/css folder, you could also try putting it there.

Please do not change settings randomly. Secondly: This issue is closed. Posting here does no good.

How to create a bullet style pager with CSS

I have these fields in my view. They all are set to be hidden, except 'Node: Nid', which I use to display all the fields. 'Content: Front of slideshow image linked to node' is set to use an imagecache preset of 600x300 pixels:

• Content: Front of slideshow image linked to node
• Node: Title
• Country (term)
• Architect (term)
• Node: Link
• Node: Nid

Under 'Node: Nid' -> 'Rewriting', I have this in the 'Rewrite the output of this field', based on the available tokens:

<div class="slideshow-text-bg"></div>
<div class="slideshow-text"><h1>[title]</h1>
[tid_1] | [tid]<br />
[view_node]
</div>

This part of the CSS creates the transparent overlay for the slideshow:

.slideshow-text-bg {
  background-color: #000;
  bottom: 5px;
  height: 80px;
  opacity: 0.7;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* first, IE8 */
  filter: alpha(opacity=70); /* second, IE5-7 */
  position: absolute;
  width: 600px;
}
.slideshow-text {
  bottom: 5px;
  color: #FFF;
  height: 70px;
  left: 0;
  opacity: 1;
  padding: 10px;
  position: absolute;
  width: 650px;
}
.slideshow-text a {
  color: #FFF;
}

This part creates bullets at the top, to go back and forth between the slides, on hover. To make it work, remember to select a 'Pager Type' and 'Activate Slide and Pause on Pager Hover' under slideshow settings:

/* slideshow top controls */
.views-slideshow-controls-top {
  background: #000;
  padding: 10px 0;
  text-align:center;
  width:100%;
}
.widget_pager { /* center the pagers */
  display:inline-block;
  *display:inline;/* IE */
  *zoom:1;/* IE */
  overflow:hidden;
  text-align:left;
}
.views_slideshow_pager_field_item {
  cursor: pointer;
  float: left;
  padding: 4px 8px;
}
.views_slideshow_pager_field_item a {
  border-bottom: 0;
  display: block;
  height: 8px;
  width: 9px;
}
.views_slideshow_pager_field_item a {
  background:url("images/sprite.png") no-repeat scroll 0 0 transparent;
  text-indent:-9999px;
}
.views_slideshow_pager_field_item.active a {
  background:url("images/sprite.png") no-repeat scroll -10px 0 transparent;
  text-indent:-9999px;
}

An example of how the slideshow looks, and the sprite for the bullets. Just put it in a folder named 'images', in your theme folder, and it should work.

@ressa, very very nice. Thanks so much for sharing.

@rwilson0429, you're welcome :-)

Good news for Drupal 7 users: Building a slideshow with captions in D7 can be done in minutes, by combining Views Slideshow with the Flex Slider module. As an added bonus the slideshow will be responsive, resizing the image according to the screen width.

Personally I wasn't happy with the way Views manages content formatting for the teaser - no matter what I did it refused to use the default "summary" text for Drupal's default content type and instead used "trimmed". Furthermore, it counted all html code (such as <a href="yadayada"> in the trimmed character count so if you have any html in the first paragraph it makes your slider text look terrible (please note these observations are based on Rob Feature's podcast and comment) which is what I based my slider view on.

So I decided to add a new field to my content types that are added to the slider called field_slider_txt which allowed me to write specific text for the slider. I hid this field in the display settings for the content types and just added the field to my slider view instead of the [body] field.

The result looks much better: http://www.alexanderhanff.com

I don't understand where this CSS should go. Can you offer any path or file to put this in?

@scarey, the location of your css is dependent on the theme you are using. It's not recommended that you modify your theme, so you should create a sub-theme and modify your settings there. The css files responsible for your styles are usually in your sub-theme folder. Use a developer tool like Firebug to examine the html elements on your page. Firebug will display the styles, as well as location of the css file responsible for the style, of the elements on your page.