Creating a Drupal 7 Slideshow Using Views Slideshow

Today we will be explaining how to create a Drupal Views Slideshow similar to the one found on our home page.

  1. Install the Views and the Views Slideshow modules. Step by step installation directions can be found here:
  2. Create a new content type called "slider"
  3. Add fields "slider_image" and "slider_pager" both as widget type "image". The settings of these fields do not matter as they will be unique to your slideshow. For our website, however, the "slider_image" has both a max and a min image resolution of 624px by 312px.
    note: I label fields with the content type's name as a prefix - this is my own personal preference.
  4. Create a new view
  5. Set "View name" to whatever you desire
  6. Set "Show content of type" to "Slider"
  7. Skip over Page section as that is not important
  8. Check "Create a Block"
  9. Title block whatever you desire
  10. Set display format to "Slideshow" of "fields"
  11. Click "Continue and Edit"
  12. In the views UI, make sure you click on "Block" under "Display" because we want to edit the block view, not the page view
  13. In the views UI, under "FIELDS" click "Add"
  14. Add the field "Content: Slider Image"
  15. Under "STYLE SETTINGS", uncheck "Add default classes"
  16. In our demo, we link the images (slides) to an internal page. To do this check "Output this field as a link" under "REWRITE RESULTS" and give it a "Link Path" of whatever you desire.
  17. Add the field "Content: Slider Pager"
  18. Under "STYLE SETTINGS", uncheck "Add default classes"
  19. In the views UI, under "FIELDS" click "Content: Title" and click "remove"
  20. In the views UI, under "PAGER" click on "Display a specified number of items "
  21. Check "Display all items"
  22. In the views UI, under "FORMAT" click on "Settings" next to "Slideshow"
  23. All settings are optional except the following:
  24. Under "Bottom Widgets" check "Pager"
  25. Select 3 for "Weight of the Pager"
  26. Select fields for "Pager Type"
  27. Check "Content: Slider Pager"
  28. Check "Activate Slide and Pause on Pager Hover" (this is technically optional, but used in our example)
  29. In the views UI, under "FORMAT" click on "Settings" next to "Slideshow"
  30. Uncheck "Provide default field wrapper elements"
  31. Go Structure > Blocks and add block "View: Slider" to desired region
  32. Add the following CSS to you stylesheet:

#mySliderDiv .views-slideshow-controls-bottom{

#mySliderDiv .views-slideshow-pager-fields{

#mySliderDiv .views-slideshow-pager-field-item{

#mySliderDiv .views-content-field-slider-pager{

#mySliderDiv .active .views-content-field-slider-pager{
About the CSS

Make sure to replace the div "mySliderDiv" with the name of the div your block lives inside.

The CSS first sets the container div's position to relative, making any absolutely positioned item inside the div positioned from its top-left corner.

The class "views-slideshow-controls-bottom" is Drupal's name for the controls. We give this div an absolute position of "top:318px;" so it is positioned below the container div whose height is 312px. This position could be anything depending on your slideshow's dimensions.

The class "views-slideshow-pager-fields" is Drupal's name for the pager container. We float this div right to right align it to the slideshow's container div.

The class "views-slideshow-pager-field-item" is Drupal's name for the pagers. Technically there is nothing inside these div's because the pager's field we selected in step 27 has no image in it. That is OK - all we need is Drupal to create an element we can target (if you did insert an image into the "slider pager" field when creating the node, that image would appear here). In any case, we float the div's left to maintain correct order (otherwise the first pager div would float to right) and we give them some breathing space with a margin.

The class "views-content-field-slider-pager" is Drupal's name for our "slider_pager" field we created when creating the Slider content type. This name would change depending on what your field's machine is. We give these div's a height, width, and background color to our liking (since they are empty). Then, using Drupal's elusive "active" class, we are able to give these pager div's a pseudo hover effect by changing their background color.