Функция Javascript переключается при смене слайда карусели

Я студент и новичок в Bootstrap. Мне удалось создать карусель Bootstrap (v5), которая использует REST API для показа 3 самых популярных фильмов дня. Справа я разместил отдельный блок div, который должен содержать заголовок и описание фильма, показанного на слайде карусели.

Вопрос: как изменить информацию о фильме в блоке справа, чтобы отображалась информация о текущем слайде сразу после его показа?

(Название и описание фильма хранятся в массиве)

Это HTML-код карусели в левом столбце <div class = "row">:

    <div class = "col-7">
      
      <div id = "mainCarousel" class = "carousel slide" data-bs-ride = "carousel">
        <div class = "carousel-indicators">
          <button type = "button" data-bs-target = "#mainCarousel" data-bs-slide-to = "0" class = "active" aria-current = "true" aria-label = "Slide 1"></button>
          <button type = "button" data-bs-target = "#mainCarousel" data-bs-slide-to = "1" aria-label = "Slide 2"></button>
          <button type = "button" data-bs-target = "#mainCarousel" data-bs-slide-to = "2" aria-label = "Slide 3"></button>
        </div>
        <div class = "carousel-inner" id = "previewsCarousel">
          <div class = "carousel-item active" >
            <img src = "pirate.jpg" style = "height: 400px;" class = "d-block w-100" >
          </div>
          <div class = "carousel-item">
            <img src = "pirate2.jpg" style = "height: 400px;" class = "d-block w-100" >
          </div>
          <div class = "carousel-item">
            <img src = "pirate3.jpg" style = "height: 400px;" class = "d-block w-100" >
          </div>
        </div>
        <button class = "carousel-control-prev" type = "button" data-bs-target = "#mainCarousel" data-bs-slide = "prev">
          <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
          <span class = "visually-hidden">Previous</span>
        </button>
        <button class = "carousel-control-next" type = "button" data-bs-target = "#mainCarousel" data-bs-slide = "next">
          <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
          <span class = "visually-hidden">Next</span>
        </button>
      </div>

Правый столбец (с информацией о фильме) содержит следующее:

    <div style = "position: relative;" class = "col-5 mt-5" id = "DescrizioneCarousel">

      <h2>Film title here</h2>
      
      <p><b>Genre:</b> Action</p>
      <p id = "filmDescLimit"><b>Overview:</b> This is an overview of the film</p>
      
</div>

Я думал о функции Javascript, которая динамически нацелена на активный слайд, чтобы позволить его «индексу» быть позицией массива, где будет найдена соответствующая информация о пленке, но я не знаю, как это сделать!

Спасибо!

Добро пожаловать в Stack Overflow, в вашем вопросе отсутствует жизненно важный компонент .... код !! Без него сложно дать совет по вашему коду. Пожалуйста, предоставьте минимальный воспроизводимый пример

Jon P 06.04.2021 05:42

@JonP, спасибо, я попытался вставить код, чтобы вопрос был яснее, даже если я потерялся на стороне javascript. Надеюсь, вы, ребята, можете мне помочь!

Luca Galli 06.04.2021 21:13

Добро пожаловать в Stack Overflow .. Добавьте свой JavaScript-код в комментарии, и я вставлю его в свой пост :) .. Beacause Code важен для решения вашего вопроса :)

Kevin M. Mansour 06.04.2021 21:24

Привет, @ KevinM.Mansour, как я уже сказал, я понятия не имею, как структурировать код javascript, и вот почему я спросил. Что-то не хватает, что я мог бы попытаться добавить?

Luca Galli 06.04.2021 21:34

Итак, вы имеете в виду, как напечатать информацию о фильме в правильном разделенном Div, используя REST API, который хранится в массиве ... Это то, что вы имеете в виду?

Kevin M. Mansour 06.04.2021 21:40

@ KevinM.Mansour Да, благодаря API у меня есть массив, который содержит в каждом слоте информацию о конкретном фильме, а индексы 0, 1 и 2 содержат информацию о фильмах, которые показаны в карусели. Мне нужна функция, которая продолжает распознавать активный слайд и печатать его информацию в отдельном div.

Luca Galli 06.04.2021 21:49

Итак, какой язык вы использовали для вызова Rest API или что?

Kevin M. Mansour 06.04.2021 21:50

Я использовал javascript для создания XMLhttpRequest и получил в качестве ответа массив. Фактически, три изображения, показанные в карусели (я назвал их pirate.jpg в коде), на самом деле взяты из массива, и я получил их с помощью response.image [i]. Скажем так, у меня есть локальный массив со структурой: array [{id: 0 title: ONE overview: DESC1 img: 0.jpg}, {id: 1 title: TWO overview: DESC2 img: 1.jpg}, {id : 2 title: THREE overview: DESC3 img: 2.jpg}] и когда в карусели отображается 2.jps, разделенный div должен отображать «id: 2 title: THREE overview: DESC3».

Luca Galli 06.04.2021 21:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
8
34
0

Другие вопросы по теме