Hero / Slideshow
The Hero element can be used to make content stand out. It is usually placed as the first block and always contains media. The media can be an image, a video or a map. The Hero element can be a single item or a slideshow. In case of a slideshow we use the FlexSlider module.
<div class='block hero'> <img src="/photos/group_public_large.jpg" alt="description of the image" /> <p> <span> Example with an image </span> </p> </div>
Example with an image
If you want to show multiple items in a hero block, you can use the FlexSlider module. The FlexSlider markup is simple and straightforward. First, start with a single containing element,
<div class=”flexslider hero”> in this example. Then, create a
<ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each
<li> and you are ready to rock.