One or Multiple. Make a Bootstrap Carousel from a Multiple Value Drupal Field
Earlier this week I wrote how to create a Bootstrap Carousel using the Drupal Paragraphs module. We can modify this approach to add a Bootstrap Carousel on a field. I use this most on nodes that have a Featured Image field, one where we can use as a hero image, and one where we can set the Open Graph Meta image on a per node basis.
Thanks to social media outlets like Facebook, LinkedIn, and Twitter, every piece of content published to the web should have an image attached to it, define by the og:image meta tag. But what happens when the content has or deserves more than one image? If the field allows multiple, we can display them as a carousel/slideshow.
So, all we need is a multiple value field. Once we have defined which field that is, take a look at this markup and replace your template's markup with it. The file name would be field--FIELD-NAME.html.twig
The first IF statement simply says if there is more then one, print this Bootstrap markup. If there aren't, just print the output with no markup.
We then loop through the Slides for the carousel indicators and repeat the loop for the carousel items, adding a unique class using the key making them unique also. This allows the indicators and Next/Previous links to step through, and gives additional slide classes to style if needed.