This video shows how to add a slideshow pager, and also demonstrates how to style the pager using CSS

• Click the 'gear' on the block, and click "Edit view"
• In the "Pager" section, click "Full"
• Change this to "Display a specified number of items"
• Keep the "Items to display" set to 5

Now, if we save the view, we see that there is no pager.

Views Slideshow doesn't come with its own counter, because Views already has one. We need to add this as a field option so that we can use it.

• Edit the view
• Add new field: "Global: View result counter"
• [ ] Create a label
• [x] Exclude from display
• (Apply)
• In the Format section, click "Settings" next to "Slideshow"
• Under the "Top Widgets" section, check the box next to "Pager"
  • Pager fields: "Global: View result counter"
• (Apply)
• Save the view

Then, if you'd like them to be horizontal instead of vertical, you could use some css like the following:

.views-slideshow-pager-field-item {
float: left;
padding: 5px;
}

We can also add some styling to know which slide is the active slide. Something like this:

.views-slideshow-pager-field-item.active {
background: #bbbbbb;
border-radius: 4px;
}

Now, we can click on the numbers to move between the slides. However, these aren't links in the traditional sense, so the cursor doesn't indicate that the pager numbers are clickable. We can change this by making one small tweak to our view.

• Edit the view
• Click the field "Global: View result counter"
• Expand the "Rewrite results" section
• Check the box next to "Output this field as a link"
  • Link path: #pager (You can actually put anything here, but views won't accept a "#" by itself.)
• Click Apply and save

And now when you take at the block our numbers display as links and they are clickable.