want to make a custom carousel like this don’t know what this is called actually?

I am making a short website with movie recommendation I have created a rest API using python on heroku I am getting that response using ajax

 $.ajax({
                url: "MYURL?movie_name=" + movie,
                method: "GET",
                headers: {
                    "content-type": "application/x-www-form-urlencoded",
                    "Access-Control-Allow-Origin": "*"
                },
                crossDomain: true,
                success: function(result) {
                    console.log("hey");
                    console.log(result);
                    res = JSON.parse(result);
                }
            });

this res[“img”] and res[“name”] contains the images and names of the movie

How to create this type of carousel or what is this called is this carousel?

I am new to frontend bootstraps

Now I want to create a carousel like this with back as shadowed and less opacity with the mid photo as bright look

Answer

There is a jQuery gallery something like you want.

Check Demo here: https://tympanus.net/Development/3DGallery/index2.html

Download Source: https://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/

You can add href link and description below. Left and right images have css of opacity:1 in this example, which you can easily change to opacity:0.5 or some value you want. Give it a try.

Prepare your html something like;

<section id="dg-container" class="dg-container">
    <div class="dg-wrapper"></div>
    <nav>
        <span class="dg-prev">&lt;</span>
        <span class="dg-next">&gt;</span>
    </nav>
</section>

Then, prepare html in your ajax success;

success: function(result) {
    res = JSON.parse(result);

    $.each(res, function() {
        $('.dg-wrapper').append('<a href="YourVideoUrl">
            <img src="'+res["img"]+'" alt="'+res["name"]+'">
            <div>'+res["name"]+'</div>
        </a>');
    });
}