SPDynamicSlider.js

// Dynamic Image Slider for SharePoint
// Image Carousel
// SharePoint Image Slider

$(document).ready(function () {
    // ### Fecth Data from The List
    var resourcez = "/_api/web/lists/GetByTitle('SlideMagic')/items?$select=Title,EncodedAbsUrl,Description,Alive";
    //var eureka = "$top=3";
    var orient = "$orderby=Created desc";

    // get couresel-inner width
    var courInnerWidth = $('#myCarousel').find('.carousel-inner').width();

    var finals = resourcez + "&" + orient;
    var fetchingrecords = function (finals, itemHeight) {
        // alert("We are in fetchingrecords() record "+id);
        var links_url = _spPageContextInfo.webAbsoluteUrl + finals;
        var links_headers = { "accept": "application/json;odata=verbose" };
        var callback = function (data) {
            // console.log(data);
            var html = '';
            var ind_html = '';
            var slider = '';
            var counter = 0;

            $.each(data.d.results, function (index, item) {
                // console.log(item.EncodedAbsUrl);

                // console.log(item.Description);
                // console.log(item.Alive);

                if (item.Alive == true) {
                    // console.log("Are we Alive>? " + item.Alive);
                    //set indicators
                    var ind = ' <li data-target="#myCarousel" data-slide-to="' + counter + '"></li>';
                    ind_html += ind;

                    //$('.carousel-indicators').empty().html(ind_html);

                    if (index == 0) {
                        // console.log(index);
                        //slider = '<div class ="item active"><div class= "fill img-responsive" style="background:url(' + item.EncodedAbsUrl +');"></div><div class="carousel-caption"><p>' + item.Description + '</p></div></div>';
                        var slider = '<div class ="item active"><div class= "fill" style="background-image:url(' + item.EncodedAbsUrl + '); width:"' + itemHeight + '"px !important;"></div><div class="carousel-caption"><p>' + item.Description + '</p></div></div>';
                    }
                    else {
                        // console.log("Position is : " + index);
                        //slider = '<div class ="item"><div class= "fill img-responsive" style="background:url(' + item.EncodedAbsUrl + ');"></div><div class="carousel-caption"><p>' + item.Description + '</p></div></div>';

                        var slider = '<div class ="item"><div class= "fill" style="background-image:url(' + item.EncodedAbsUrl + '); width:"' + itemHeight + '"px !important;"></div><div class="carousel-caption"><p>' + item.Description + '</p></div></div>';
                    }

                    //add caption
                    html += slider;
                    counter += 1;
                    // console.log(counter);
                }
            });

            $('#myCarousel').find('.carousel-inner').html(html);
            //$('.carousel-inner').append(html);
        }; // callback

        $.ajax({
            type: 'GET',
            headers: links_headers,
            url: links_url,
            success: callback,
            error: function () {
                console.log("Failed to retrieve");
            }
        });
    }(finals, courInnerWidth); //fetchingrecords()
});