Custom Theming Bootsrap Carousel with Paragraph Type Background Info:
I tried to create a custom theme for my carousel section and I am unable to get it to work. I have tried using the default carousel that Drupal comes with. I have tried using slide show views. Also I already know about Jim Bir's Custom Bootstrap Carousel and Slick Carousel but I am unable to use them since these extensions are still in Beta.
Problem Statement:
The main avenue that I want to try to do is create a paragraph type called Carousel Section that has a reference to another paragraph type called `Caraousel Slide'.
I wanted to use this design so that way I can organize the slides individually on my pages.
Within the Carousel Slide paragraph type it would have the following fields:

Slide Image
Slide Title
Slide Description
Slide Link(which is the location of where the slide will take you if you click on it.)

I would like to use a preprocessor hook do get grab these values from Drupal and display them in my twigg file.
Question:
How can I achieve my problem statement? The bare minimal knowledge that I need is to how to at least get these fields to present themselves on my twig file and from there I can use HTML and CSS to make the carousel.
Unless you need some very specific logic, I wouldn't use preprocessing, but use Drupal's template suggestions and Twig instead.

I always use Slick over CDN, adjust for your own needs if necessary. All filenames are relative to the base directory of your theme or module. Replace UPPERCASE_WORDS with corresponding machine names.



Create a library for your carousel:

MYTHEME.libaries.yml

carousel:
  version: 1.0.0
  js:
    https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js: {type: external, minified: true, defer: true, async: true}
    js/my_carousel.js: {}
  css:
    layout:
      https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css: {type: external, minified: true}
      css/my_carousel.css: {}




js/my_carousel.js

behaviors are the drupalesque counterpart to jQuery's .ready() handler (e.g. even if your carousel is loaded inside a view with ajaxified paging, it will still trigger .slick() after every paging).

(function ($, Drupal) {
  Drupal.behaviors.myCarousel = {
    attach: function (context, settings) {
      $('[data-slick]', context).once('myCarousel').slick();
    }
  };
}(jQuery, Drupal));




templates/paragraph--CAROUSELCONTAINER.twig.html

The container template would be the place where you alter your slick options, e.g. if you have a integer field "Autoplay speed" on your container paragraph, you could add to my_carousel_options using paragraph.field_autoplay_speed.0.value

{% set my_carousel_options = '"autoplay": true' %}
{{ attach_library('MYTHEME/carousel') }}

&lt;div{{attributes}} data-slick="{{ my_carousel_options }}"&gt;
  {{ content.FIELD_CONTAINING_SLIDES }}
&lt;/div&gt;




templates/paragraph--CAROUSELSLIDE.twig.html

Here you can decide what to render on each individual slide

{# maybe you also need an additional wrapper &lt;div&gt; around each invidiual slide #}
&lt;a href="{{ paragraph.MY_LINK_FIELD.0.url }}"&gt;
  {{ content.MY_IMAGE_FIELD }}
  {{ content.MY_TITLE_FIELD }}
  {{ content.MY_DESCRIPTION_FIELD }}
&lt;/a&gt;


If necessary you can further adjust the HTML markup of your slide subfields using something like templates/field--paragraph--MY-DESCRIPTION-FIELD.html.twig



Optional:
If you want to get rid of some container &lt;div&gt;s around fields automatically rendered by Drupal, create a wrapper-less field template. E.g. I wanted to remove ALL &lt;div&gt;s and field labels rendered by any paragraph host field:
(this is global for every paragraph host field, change it to a template suggestion matching only your carousel if you don't want this)

field--entity-reference-revisions.html.twig

{% for item in items %}
  {{ item.content }}
{% endfor %}




Finally create your own CSS styles for your carousel in css/my_carousel.css and rebuild the cache so Drupal discovers your new template files.

This basically is how I'm creating carousels on every of my projects. Not tested with Bootstrap theme though, this is some sort of general purpose tutorial.