accourse banner: use bootstrap carousel to display vue_accourse social-issues and associated-persons as slides

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue

@@ -29,13 +29,15 @@
    </teleport>
 
    <teleport to="#header-accompanying_course-details #banner-social-issues">
-      <div class="col-12">
-         <social-issue
-            v-for="issue in accompanyingCourse.socialIssues"
-            v-bind:key="issue.id"
-            v-bind:issue="issue">
-         </social-issue>
-      </div>
+      <social-issue
+         v-for="issue in accompanyingCourse.socialIssues"
+         v-bind:key="issue.id"
+         v-bind:issue="issue">
+      </social-issue>
+   </teleport>
+
+   <teleport to="#header-accompanying_course-details #banner-persons-associated">
+      <persons-associated :accompanyingCourse="accompanyingCourse"></persons-associated>
    </teleport>
 
 </template>
@@ -43,12 +45,14 @@
 <script>
 import ToggleFlags from './Banner/ToggleFlags';
 import SocialIssue from './Banner/SocialIssue.vue';
+import PersonsAssociated from './Banner/PersonsAssociated.vue';
 
 export default {
    name: 'Banner',
    components: {
       ToggleFlags,
-      SocialIssue
+      SocialIssue,
+      PersonsAssociated
    },
    computed: {
       accompanyingCourse() {