Modifying the Pager to display icons

Just add a numbered pager and this css (assuming your image is 10x10 pixels):

.views_slideshow_singleframe_pager .pager-item a{
text-indent:-9000px;
display:inline-block;
outline: 0 none;
background: url('../images/pager_item.png') no-repeat center;
height: 10px;
width: 10px;
}

.views_slideshow_singleframe_pager .activeSlide a {
background: url('../images/pager_item_active.png') no-repeat center;
}

I'm trying to do the same thing. But my problem is that I can't even make the .activeSlide style working. I saw some issues abt this here but no one has any answer yet.

Please share if you'd found a way to do this. Thanks.

Thanks, this is exactly what I was looking for. I'm gonna risk the Google crankiness because I'd really prefer to use small images instead of the numbers.

For the solution in #1, the negative text indent hides the background images in IE7 (at least).

This is how I did it:

Add this code to your theme (grnet in my case) template.php

/**
 * Views Slideshow: "previous" control.
 *
 * @ingroup themeable
 */
function grnet_views_slideshow_singleframe_control_previous($vss_id, $view, $options) {
$slide_img = theme_image('sites/all/themes/grnet/images/prev.png', t('Previous'), t('Previous'), array('class' => 'slideprev'));
  return l($slide_img, '#', array(
    'attributes' => array(
      'class' => 'views_slideshow_singleframe_previous views_slideshow_previous',
      'id' => "views_slideshow_singleframe_prev_" . $vss_id,
    ),
    'fragment' => ' ',
    'external' => TRUE,
	'html' => true,
  ));
}

/**
 * Views Slideshow: "pause" control.
 *
 * @ingroup themeable
 */
function grnet_views_slideshow_singleframe_control_pause($vss_id, $view, $options) {
  return '';
}

/**
 * Views Slideshow: "next" control.
 *
 * @ingroup themeable
 */
function grnet_views_slideshow_singleframe_control_next($vss_id, $view, $options) {
$slide_img = theme_image('sites/all/themes/grnet/images/next.png', t('Next'), t('Next'), array('class' => 'slidenext'));
  return l($slide_img, '#', array(
    'attributes' => array(
      'class' => 'views_slideshow_singleframe_next views_slideshow_next',
      'id' => "views_slideshow_singleframe_next_" . $vss_id,
    ),
    'fragment' => ' ',
    'external' => TRUE,
	'html' => true,
  ));
}

Place images according to the urls in the code above. In my case I wanted to remove the pause-button.

marking as fixed.

Hi, how to replace the pager page numbers with specified text? I mean the pages of views_slideshow pager.

FYI: In the D7 version of this modul you may use template_preprocess_views_slideshow_pager_field_item() to replace the pager items by images. Put into the template.php of your theme:

function YOUR_THEME_NAME_preprocess_views_slideshow_pager_field_item(&$vars) {
  // Use $vars['vss_id'] to conditionally rewrite the pager items for a certain Slideshow
  if ('YOUR-SLIDESHOW-ID' == $vars['vss_id']) {
    // Images for previous/next are placed in your theme folder/images.
    // They are named "pager-next.png" and "pager-previous.png".
    // Change width/height to your needs.
    $image = sprintf("/%s/images/%s", drupal_get_path('theme', 'ksw'), (($vars['count'] == 1) ? 'pager-next.png' : 'pager-previous.png'));
    $vars['item'] = sprintf('<div class="views-pager-image"><img src="%s" width="20" height="20" alt="pager-image"/></div>', $image);
  }
}

how to hide numbers. (For background I am using css-sprite)
.pager-item {
background: url('../images/slide-point.png') no-repeat;
height: 15px;
width: 15px;
}
.activeSlide {
background: url('../images/slide-point.png') no-repeat;
background-position: 0 -17px;
height: 15px;
width: 15px;
}
.pager-item a, .activeSlide a {visibility:hidden;}