JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

JavaScript

var minorVid;
var video;

function getMoviesData() {
    $.ajax({
        type: "GET",
        url: "http://localhost:3000/custom_categories",
        contentType: "application/json",
        success: function(data) {

            $.each(data, function(j, item) {
                $("#dynamic-multiple-carousel").append("<div class='multi-slider-carosuel'> <h4>" + item.category_name + "</h4> <div class='multi-slidec-list slider responsive'></div> </div >").find(".multi-slidec-list").each(function(i) {
                    $(this).attr("id", "multi-slidec-list" + i);
                });
                $.each(item.movie_data, function(k, movi_Data) {
                    const take_where_u_left =
                        '<div> <div class="multi-slid-wrappr"><span class="spinner"> </span> <img src="images/thumbnail1.jpg" alt=' + movi_Data.movie_name + ' />' +
                        '<i class="far fa-play-circle"></i>' +
                        '<div class="description"> <h2>' + movi_Data.movie_name + '</h2> <p>' + movi_Data.release_year + '</p> </div> ' +
                        '</div> <div class="play-trailer rounded-4 p-1" data-movie-url="images/promo.mp4">  </div>';
                    $("#multi-slidec-list" + j).append(take_where_u_left);
                });

            });


            // $.each(data, function(i, value) {
            //      if (i == "banner_data")
            //          prepareTopBanner(value);
            //      else if (i == "custom_categories")
            //     prepareCarouselMovieData(value)
            // });
            $("#main-carousel-inner .carousel-item").first().addClass("active");
            $("#main-carousel-indicator li").first().addClass("active");
            $('.responsive').slick({
                dots: false,
                infinite: true,
                //arrows:false,
                prevArrow: '<b class="arrow prev"></b>',
                nextArrow: '<b class="arrow next"></b>',
                //centerMode:...