In this example you will create a views block that displays images in a slideshow using thumbnails of the images as a pager underneath the slideshow. This will demonstrate using Views Slideshow and Image Styles to display images.
For this example, we are going to display a single image from each content item of the type "Photos", which we assume you have already set up with an image field. We are also assuming that Views Slideshow and at least one plugin is installed and activated.
The first step is creating the right image styles to display the images from the node. We will create one for the slideshow image, and one for the pagers. Go to Image Styles and create the following two styles:
The next step is creating a view for the slideshow. Because the block will show the images in content, this view is considered a "Content" view. Go to add new view, enter the following properties, and click Next:
Choose Show Content of type Photos. You can choose any way you wish to sort the content.
Untick the box next to Create a page and tick the box next to Create a block. Enter a block title and choose Slideshow from the Display format select box. Select fields from the other select box. Leave the remaining settings as they are.
Click on Continue & edit.
Turn off the pager by clicking on Display a specified number of items in the middle column and selecting Display all items in the next screen, and applying the settings.
Enter a Block name by clicking on None at the top of the middle column.
Next, remove the Content: Title field from the fields list in the left column by blicking on rearrage under the arrow.
Next we have to add the thumbnail image field. Click on Add under the fields section and select your image field from the list. In the next screen, turn off the label, select Exclude from display and select slideshow_thumbnail from the Image Style select box. Under MORE, enter Thumbnail under Administrative Title.
Click on Apply (all displays).
Now we have to add the image field to display in the slideshow. Clcik on Add under the fields section and select your image field from the list. In the next screen, turn off the label and select slideshow_image from the Image Style select box. Under MORE, enter Display Image under Administrative Title.
Click on Apply (all displays).
Click on Settings next to Format: Slideshow in the first column. In the screen that opens we can choose the options for our slideshow.
For the purpose of this example, we will only add the thumbnails as a pager, and leave the remaining slideshow settings as they are. Select the tick box next to Pager under Bottom Widgets. Select Fields from the Pager Type select box. Select the tick box next to Thumbnail.
Click on Apply (all displays).
Click on Save to save the view.
You can test the view by adding the block you have created to your theme.