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. Click Modules, ensure that Views UI is set to ON, and click Save configuration.
   Note: Having the Views UI in the ON state slows the performance in the Developer Portal. Ensure that it is set to ON only for the setup process.
2. Create a content type for your carousel.
   1. Click Structure, then click 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 content type, then click manage fields for your newly created content type.
   5. Delete the Body field.
   6. Label your field in the Add a new field section.
      For example, slide image.
   7. Optional: Label your machine name by clicking edit next to the label that is generated automatically.
   8. Select Image as your field type from the list.
   9. Ensure that the widget type is Image, then click Save.
   10. Click Browse to assign the image that you want as your default image for your slide show if no other images are found.
   11. Click Save field settings, then click Save settings.
3. 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 2.
   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 Browse to find an image for your slide show, click Upload to upload the image, then click Save.
   4. Click + Clone content to open a clone of the image you created. Replace the title and image of the clone with what you want the next slide to contain.
   5. Repeat the cloning and editing process until you are satisfied with the content your slides, and the number of them.
4. Create a view for your carousel.
   1. Click Structure, then click Views > Add new view.
   2. Label your view.
      For example, Slide show.
   3. Clear the Create a page check box, and select the Create a block check box.
   4. Select Slick carousel in the display format section.
   5. Enter the number of slides you have for your carousel in the Items per page field, then click Continue and edit.
   6. Click Title and enter <none> into the text field. Click Apply (all displays).
   7. In the Format section, click Settings for Slick Carousel, and then set Skin Main to Default. Click Apply (all displays).
   8. In the Fields section, click Add > Content: slide image > Apply (all displays).
   9. Clear the check box for Create a label, then click Apply (all displays).
   10. In the Fields section, click Content: Title > Remove.
   11. In the Filter Criteria section, click Content: Published > Remove.
   12. In the Filter Criteria section, click Add and select one part of the slide image content type that you created for your carousel in step 2. Click Apply (all displays), then click Apply (all displays) again.
       Setting this filter criteria ensures that when new content is published to the Developer Portal, the slide show continues to display correctly.
   13. Click Save.
5. Enable the carousel functionality on your Developer Portal home page.
   1. Click Configuration, then click Media > Slick carousel.
   2. For Default, click edit, then click the settings tab in the list on the left.
   3. Select Autoplay, then click Save.
6. 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 Panel section.
   3. To remove the welcome banner, click the Settings icon in the Welcome Banner section for the Top pane, and click Remove.
   4. For the Top pane, click Settings > Add content > Miscellaneous > View: name_of_your_view. Click Finish.
   5. Click Update and save.
7. Click Modules, and set Views UI to OFF. Click Save configuration.

/* carousel */
.slick-prev::before, .slick-next::before {
    color: #ffffff;
}