This video will show you how to create a large image slideshow, how to use images as pagers, how to position the image pager over the main slide image, and how to position the slide text over the main slide image.

Large Image Slideshow

One of the most common ways to use Views Slideshow is to display a Large image slideshow at the top of the page. Let's go ahead and do that.

Move block to "featured" section

First, we'll move our "Featured Content" block to the "Featured" region of our theme.

  • Go to "Structure => Blocks" (admin/structure/block)
  • Move "View: Featured Content" to the "Featured" region.
  • Save

Now, if we go home, we'll see that the slideshow is in the "Featured" region. It doesn't look great though, so I'm going to make a couple of adjustments to make it look a bit better.

  • Edit the view
  • In the Format section, click "Settings" next to "Slideshow"
  • Remove the Pager from the Top Widgets
  • Remove the Controls and Slide Counter from the Bottom Widgets
  • Add the Pager to the Bottom Widgets, and select the "Global: View result counter" field
  • In the Fields section, click "Content: Featured Content Image"
    • Image style: featured_content
    • (Apply)
  • Save the view

Now, when we go home, the slideshow looks more like a typical slideshow.

Create image pager

When we have more space like this, it's common to use an image pager instead of numbers. Let's walk through how to do that.

First, let's create the image style for the pager.

  • Go to "Configuration => Media => Image styles => Add style" (admin/config/media/image-styles/add)
  • Style name: featured_content_pager
  • Effect: Scale and crop
    • Width: 50
    • Width: 50

Next, let's update the view, and add our image field to use as the pager.

  • Go to "Structure => Views => Featured Content" (admin/structure/views/view/featured_content)
  • Select the Block display
  • Add a field "Content: Featured Content Image"
    • [ ] Create a label
    • [x] Exclude from display
    • Image style: featured_content_pager
  • Remove the field: "Global: View result counter"
  • In the Format section, click "Settings" next to "Slideshow"
  • In the Bottom Widgets section, choose the pager field "Content: Featured Content Image" (Make sure to choose the second one, that is using the featured_content_pager image style)
  • [x] Activate Slide and Pause on Pager Hover (This will switch the active slide on hover instead of when clicked.)
  • Apply
  • Save View

Now, when we go to the homepage, our slideshow looks a little more standard, and uses the images as pager items.

Image pager over image slideshow

If you'd like the slideshow to take up a bit less room, or you just want to control the display a bit more, you can use CSS to place the pager on top of the main slideshow window. Adding something like the following can achieve this effect.

.views-slideshow-pager-fields {
position: absolute; /* Positions the element absolutely. We can use absolute because the container is positioned relatively. */
bottom: 20px; /* Position 20px up from the bottom */
right: 10px; /* Position 10px in from the right */
z-index: 99; /* Set the z-index to something higher than the slideshow, so that the pager is on top of the slideshow */
background-color: rgba(0, 0, 0, 0.6); /* Add a slightly transparent background to set the pager apart */
border-radius: 6px; /* Round the corners of the background */
padding: 10px; /* Add 10px of padding around the pager images */
}

Text over image slideshow

Another common adjustment is to place the slideshow text over the image. This can also be applied via CSS. I'll put the title field over the image, but you could do this with any text field. (ie: body, description, etc.)

#views_slideshow_cycle_teaser_section_featured_content-block .views-field-title { /* Select the title field inside the slideshow div */
position: absolute; /* Positions the element absolutely. We can use absolute because the container is positioned relatively. */
top: 0px; /* Position 10px down from the top */
left: 0px; /* Position 10px in from the left */
z-index: 99; /* Set the z-index to something higher than the slideshow, so that the pager is on top of the slideshow */
background-color: rgba(0, 0, 0, 0.6); /* Add a slightly transparent background to set the pager apart */
border-radius: 0 0 6px 0; /* Round the bottom right corner of the background */
padding: 10px; /* Add 10px of padding around the pager images */
}
 
#views_slideshow_cycle_teaser_section_featured_content-block .views-field-title a { /* Select the links inside the title field inside the slideshow div */
color: #ccc; /* Change the color of the link text */
text-shadow: 2px 2px #000000; /* Adjust the text shadow to look a bit better */
}

And now when you refresh, see that the title has been moved over the image.