Implementing an image carousel

You can customize your Developer Portal home page to display images in a carousel. The image carousel provides your Developer Portal home page with a continuous slide show that is customized to your specifications.

1. Create a content type of Image for your carousel.
   1. Click Structure > Content types > Add content type.
   2. Enter the name of your content type in the Name field.
      For example, Slide show picture.
   3. Optional: Specify the description of your content type in the Description field.
      For example, A picture to display in the slideshow.
   4. Click Save and manage fields for your newly created content type.
   5. Click Add field.
   6. Select Image for Add a new field, and enter a label for your field.
      For example, slide image.
   7. Click Save and continue.
      The Field settings page for your new field is displayed.
   8. In the DEFAULT IMAGE section, click Choose file to assign the image that you want as your default image for your slide show if no other images are found.
   9. Optional: Complete the Alternative text and Title fields.
   10. Click Save field settings.
   11. In the Manage fields tab for your newly created content type of Slide show picture, delete the Body field by clicking Delete on the OPERATIONS drop-down menu. Click Delete again to confirm.
2. Upload the images that you want to appear in your carousel.
   1. Click Content > Add content, then click the content type that you added in step 1.
   2. Enter a title for your image in the Title field.
      For example, if you had an image of a lighthouse, you can label the content as Lighthouse.
   3. Click Choose file under Slide image and select an image for your slide show. Complete the Alternative text field with some text to use when the image cannot be loaded.
   4. Click Save.
   5. Repeat sub-steps 2.a to 2.d until you are satisfied with the content of the slides for your carousel.
3. Create a view for your carousel.
   1. Click Structure > Views > Add new view.
   2. Complete View name.
      For example, Slide show.
   3. Select the Create a block check box in the BLOCK SETTINGS section.
   4. Select Slick Carousel for the display format.
   5. Enter the number of slides you have for your carousel in the Items per block field, then click Save and edit.
      The Edit page for your slide show view is displayed.
   6. Click the title of the view and enter <none> into the text field. Click Apply.
   7. In the FIELDS section click Add, select the check box for slide image, and click Add and configure fields.
   8. Ensure the check box for Create a label is not selected, and click Apply.
   9. In the FIELDS section, click Content: Title > Remove.
   10. In the FORMAT section, click Settings for Slick Carousel, and then set Skin Main to Default.
   11. Scroll down to the CAPTION FIELDS section, and select the Content: slide image and Override main optionset check boxes.
   12. In the OVERRIDABLE OPTIONS section, select the Autoplay, Dots, and Draggable check boxes.
   13. Click Apply.
   14. In the FILTER CRITERIA section, click Content: Published > Remove.
   15. Click Save to save the Slide show view.
4. Configure your home page to host the carousel.
   1. Click Structure, then click Pages.
   2. Click edit for the welcome page, then click content in the Panels section.
   3. To remove the current welcome banner, click the down-arrow under the OPERATIONS column for the Welcome Banner, and select Delete. Click Delete again to confirm.
   4. To add your carousel, click Add new block and select the slide show view you created in step 3. Deselect Display title and click Add block.
   5. Click Update and save.