In this video, you’ll learn how to create an actual carousel.
Code
paras_bootstrap.theme
/** * Implements hook_preprocess_paragraph__carousel(). */ function paras_bootstrap_preprocess_paragraph__carousel(&$variables) { $slides = []; $paragraph = $variables['paragraph']; if (!$paragraph->field_paragraphs->isEmpty()) { $paragraphs = $paragraph->field_paragraphs->referencedEntities(); foreach ($paragraphs as $slide_paragraph) { $item = []; if (!$slide_paragraph->field_title->isEmpty()) { $item['title'] = $slide_paragraph->field_title->value; } if (!$slide_paragraph->field_body->isEmpty()) { $item['description'] = [ '#type' => 'processed_text', '#text' => $slide_paragraph->field_body->value, '#format' => $slide_paragraph->field_body->format, ]; } if (!$slide_paragraph->field_image->isEmpty()) { // Get image field. $image_field = $slide_paragraph->field_image; $image_style = 'banner'; // Generate image URL. $item['image'] = [ '#theme' => 'image_style', '#style_name' => $image_style, ]; // Do not output an empty 'title' attribute. if (DrupalComponentUtilityUnicode::strlen($image_field->title) != 0) { $item['image']['#title'] = $image_field->title; } if (($entity = $image_field->entity) && empty($image_field->uri)) { $item['image']['#uri'] = $entity->getFileUri(); } else { $item['image']['#uri'] = $image_field->uri; } foreach (array('width', 'height', 'alt') as $key) { $item['image']["#$key"] = $image_field->$key; } } if (!empty($item)) { $slides[] = $item; } } } if(!empty($slides)) { $variables['content']['bootstrap_carousel'] = [ '#theme' => 'bootstrap_carousel', '#slides' => $slides, ]; hide($variables['content']['field_paragraphs']); } }
style.css
.paragraph--type--carousel .carousel-inner img { width: 100%; }
Commands
drupal cache:rebuild all