Drupal 7 - How to make a Banner Slideshow

Landing pages have banners (aka Header Slideshow).  If you add multiple banners, they will be displayed as a slideshow, with forward and back buttons that allow website visitors to move from image to image.  This works best with the Full Header Slideshow size.

You can see an example of this on the Makerspace website.

Instructions

1. Login to your Drupal site.
2. Navigate to an existing Landing Page and click New Draft, or create a new Landing page (Manage > Content > Add content > Landing page).
3. Edit your page content as needed, then scroll towards the bottom of the editing page to the vertical tabs.
4. In the Header tab, you'll see buttons for three sizes of Header Slideshow - Standard (smallest), Full (hero image), and Homepage.  Under Header Slideshow Full, click Add a new paragraph.  If your page already has a full banner, click Add another paragraph.
5. In the Slide Image field, click Browse.  Either upload an image, or select an image from the Library.
6. Make sure the image you select has Alternative Text.
7. Enter Title text.  For most sites, this will be the name of your department.  You can check other landing pages on your site to see what your site uses.
   Note: if the page already has a banner, make sure this new banner uses exactly the same text.  There is a bug in some older browsers that will not display text properly if the same text is not used in each banner slide.
8. In the Text field, enter a tagline, or the name of the School or Division your department is part of.  
9. If you want an additional banner image, repeat steps 4-8. 
10. Once you've added all the slides, click the Publishing options tab, set the moderation state to Needs Review, then click Save.
11. In the Review, you will not see your new banner images.  Publish the page.
12. Now you should see the page with the first banner image, and forward/back buttons to page through all the slides.

Keep in mind, the more banner images you add, the longer it will take users to load your page. Please limit the number of banners to 4 or 5 at most.

Replacing Banner Images

If you want to replace an existing banner image with a new image, use the Remove button, then click Browse to upload a new image or select an image from the Library.

1. Login to your Drupal site.
2. Navigate to an existing Landing Page and click New Draft.
3. Scroll towards the bottom of the editing page to the vertical tabs.
4. In the Header tab, locate the banner image you want to replace.  Click Remove.
5. Click Browse (smallest), Full (hero image), and Homepage.  Under Header Slideshow Full, click Add a new paragraph.  If your page already has a full banner, click Add another paragraph.
6. In the Slide Image field, click Browse.  Either upload an image, or select an image from the Library.
7. Set the moderation state to Needs Review, then click Save.
8. In the Review, you may not see your new banner image.  Publish the page.
9. Now you should see the page with the new banner image.