Image Slider - SharePoint Picture lilbrary using jquery.bxslider.js

Image Slider - SharePoint Picture lilbrary using jquery.bxslider.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/sites/eDMS/Style%20Library/ImageCarousel/jquery.bxslider.js"></script><link href="/sites/eDMS/Style%20Library/ImageCarousel/jquery.bxslider.css" rel="stylesheet" runat="server" />
<script type="text/javascript">
    var clientContext;
    var siteCollection;
    var imgLoc
    var appendString = '';
    var totalSiteCount = 0;
    var siteCount = 0;
    var asyncCallbacks = [];
    var siteCollUrl = '';
    var webHost = '';
    var isIE = false;

    $(document).ready(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
            $("#sliderplaceholder").html('');
            showProperties();
        });
    });

    function showProperties() {
        if (msieversion()) {
            //alert($.browser.version);
            siteCollUrl = _spPageContextInfo.siteAbsoluteUrl + "/";
            webHost = siteCollUrl ;
        }
        else {
            siteCollUrl = _spPageContextInfo.siteAbsoluteUrl;
            webHost = siteCollUrl + "/";
        }

        getWebPartProperties('Local');
    }

    function msieversion(str) {

        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // If Internet Explorer, return version number
        {
            //alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            //return true;
            isIE = true;
            return true;
        }
        else  // If another browser, return 0
        {
            //alert('otherbrowser');
        }

        return str;
    }

    function getWebPartProperties(imageLoc) {

        switch (imageLoc) {

            case 'Local':
                clientContext = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
                this.oSite = clientContext.get_site();
                this.oWebsite = this.oSite.get_rootWeb();
                this.list = this.oWebsite.get_lists().getByTitle("AAGBanners");
                var query = "<View><Query><Where><Eq><FieldRef Name='Region' /><Value Type='Choice'>CoastalMarine</Value></Eq></Where></Query><ViewFields><FieldRef Name='BannerLinkURL' /><FieldRef Name='FileRef' /><FieldRef Name='Title' /></ViewFields></View>";
                var camlQuery = new SP.CamlQuery();
                camlQuery.set_viewXml(query);
                this.productcollection = this.list.getItems(camlQuery);

                clientContext.load(this.productcollection, 'Include(BannerLinkURL, Title, FileRef)');
                clientContext.executeQueryAsync(Function.createDelegate(this, function () {
                    var appendString = "<ul class='bxslider'>";
                    console.log('hi');
                    var ListEnumerator = this.productcollection.getEnumerator();

                    while (ListEnumerator.moveNext()) {
                        var currentItem = ListEnumerator.get_current();

                        if (currentItem.get_item('FileRef') != null) {
                            console.log(currentItem.get_item('FileRef'));
                            //alert(currentItem.get_item('ImageURL'));
                            var url = $("<a href='" + currentItem.get_item('FileRef') + "'>").prop("pathname");
                            if (isIE)
                                url = url.substr(1, url.length);
                            appendString += "<li style='position: absolute; top: 0px; z-index: 5; display: block;'><a href='" + currentItem.get_item('BannerLinkURL') + "'><img  src='" + url + "' title='" + currentItem.get_item('Title') + "' width='100%' height='284px' /></a></li>";
                        }
                    }
                    console.log(appendString);
                    appendString += "</ul>"
                    $("#sliderplaceholder").append(appendString);
                    invokeSlider();
                    //alert("Success");
                }), Function.createDelegate(this, function (sender, args) {
                    console.log(args.get_message());
                }));
                break;
        }
    }

    function invokeSlider() {
        /*$('.bxslider').bxSlider({
          captions: true
        });*/
        $('.bxslider').bxSlider({
            mode: 'fade',
            infiniteLoop: true,
            slideWidth: 600,
            auto: true,
            autoStart: true,
            autoDirection: 'next',
            adaptiveHeight: false,
            autoHover: true,
            pause: 3000,
            autoControls: false,
            pager: true,
            pagerType: 'full',
            controls: true,
            captions: true,
            speed: 500
        });
    }
</script>
<div id="sliderplaceholder"></div>