Text Outside Carousel Keeping Website Responsive

- 1 answer

I have a carousel (based on: which loads images from an API and the carousel changes image as you click on a different image or the "previous" or "next" buttons. There are lots of examples of putting text inside the image on a carousel div yet none that I've seen with them outside of the div, e.g. as a paragraph underneath as shown by the screenshot.


Is there a way of getting the buttons to correspond to the text? So the text currently is the 4th image into the carousel if you click the next button or go to the 5th image it'll change the text underneath to something else.

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


The problem is that, currently, the description is retrieved from the server with an echo <p><?php echo $bio4; ?></p>, but the carousel works ON the page without any other requests to the server, so the description never changes.

You should perform an asynchronous request to the server when a button is clicked in order to update the description of the next movie without reloading the page.

Here is an example of an AJAX request using 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

Obviously, you will also need to modify your php file, in order to accept the data from an ajax call and return the desired output

W3C school about AJAX calls:

How to perform an ajax request with jquery:

Have fun!