Текст за пределами карусели делает сайт отзывчивым

Question

У меня есть карусель (на основе: https://codepen.io/dobladov/pen/kXAXJx), которая загружает изображения из API, и карусель меняет изображение, когда вы нажимаете на другое изображение или кнопки «предыдущий» или «следующий». Есть многопримеров размещения текста внутри изображения на карусельном элементе div пока нет ни одного, который я видел у них вне элемента div, например, в виде абзаца внизу, как показано на скриншоте.

Есть ли способ заставить кнопки соответствовать тексту? Таким образом, текст в настоящее время является 4-м изображением в карусели, если вы нажмете следующую кнопку или перейдете к 5-му изображению, это изменит текстпод чем-то еще.

<div id="carousel">
                <div class="hideLeft">
                    <img src="https://image.tmdb.org/t/p/w300<?php echo $pic1; ?>">
                </div>
                <div class="prevLeftSecond">
                    <img src="https://image.tmdb.org/t/p/w300<?php echo $pic2; ?>">
                </div>
                <div class="prev">
                    <img src="https://image.tmdb.org/t/p/w300<?php echo $pic3; ?>">
                </div>
                <div class="selected">
                    <img src="https://image.tmdb.org/t/p/w300<?php echo $pic4; ?>">
                </div>
                <div class="next">
                    <img src="https://image.tmdb.org/t/p/w300<?php echo $pic5; ?>">
                </div>
                <div class="nextRightSecond">
                    <img src="https://image.tmdb.org/t/p/w300<?php echo $pic6; ?>">
                </div>
                <div class="hideRight">
                    <img src="https://image.tmdb.org/t/p/w300<?php echo $pic7; ?>">
                </div>
            </div>
            <h2><font color="white">About the Movie</h2>
            <p><?php echo $bio4; ?></p>
        </div>
        <div class="buttons">
            <button id="prev">Prev</button>
            <button id="next">Next</button>
        </div>

Answer 1

Проблема в том, что в настоящее время описание извлекается с сервера с эхом <p><?php echo $bio4; ?></p>, но карусель работает на странице без каких-либо других запросов к серверу , поэтому описание никогда не меняется.

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

ЗдесьПример запроса AJAX с использованием JQuery:

$.ajax({ url: '/yourfile.php', //the file that echoes the descriptions
         data: {movieId: 5}, //ask for the desired description
         type: 'post', //specify the request type: GET/POST
         success: function(output) {
                     // code here to update the description
                  }
});

Очевидно, вам также потребуется изменить ваш php-файл, чтобы принимать данные из вызова ajax и возвращать желаемый вывод

Школа W3C о вызовах AJAX: https://www.w3schools.com/xml/ajax_intro.asp

Как выполнить запрос ajax с помощью jquery: http://api.jquery.com/jquery.ajax/

Получайте удовольствие!