SharePoint Carousel: How to create SharePoint Image plus text carousel on an Application page?

References:

<script src="scripts/jquery-1.8.3.min.js"></script>
<script src="scripts/SPService0.7.1a.js"></script>
<script src="scripts/unslider.min.js"></script>
<link href="styles/Welcome.css" rel="stylesheet" />

<script src="scripts/Welcome.js"></script>

HTML:

<div class="Banner">
                    <ul id='Slider'></ul>

                    <a href="#" class="unslider-arrow prev">
                        <span style="color: white; font-weight: bold;">&lt;</span>
                    </a>
                    <a href="#" class="unslider-arrow next">
                        <span style="color: white; font-weight: bold;">&gt;</span>
                    </a>

 </div>

Script:

jQuery(document).ready(function($) {
 
    var sliderList = "Slider"; // Name of the list that contains slides
    var slideContentField = "HTML"; //Name of the Rich text field that has slide content
    var slideBackgroundImageField = "Picture"; //Name of the picture field to use as background image

    Slider(sliderList, slideContentField, slideBackgroundImageField);


    });


function Slider(sliderList,slideContentField,slideBackgroundImageField) {
 
    //query to retrieve all items
    var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
 
    //return fields for slide content and background picture
    var camlViewFields = "<ViewFields><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /></ViewFields>";
 
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: sliderList,
        CAMLViewFields: camlViewFields,
        CAMLQuery: query,
        completefunc: function(xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var slideContent = ($(this).attr("ows_"+slideContentField));
                var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
                //create slide (li) and append it to other slides
                $("#Slider").append("<li style=\"background-image: url('" + picture + "');background-repeat: no-repeat;background-position: right;\">" + slideContent + "</li>");
                }); // end completefunc
            //start the slider
            $('.Banner').unslider({
                speed: 500,               //  The speed to animate each slide (in milliseconds)
                delay: 3000,              //  The delay between slide animations (in milliseconds)
                complete: function () { },  //  A function that gets called after every slide animation
                keys: false,               //  Enable keyboard (left, right) arrow shortcuts
                dots: true,               //  Display dot navigation
                fluid: false              //  Support responsive design. May break non-responsive designs

            });

            var unslider = $('.Banner').unslider();

            $('.prev').click(function (event) {
                 event.preventDefault();
                unslider.data('unslider').prev();
            });

            $('.next').click(function (event) {
                event.preventDefault();
                unslider.data('unslider').next();
            });
            }
    }); // end SPServices call
}

CSS:

.Banner { position: relative; overflow: auto;  }
/*Adjust height from HTML div in the slider list*/
.Banner li { list-style: none; margin-top:-15px;}
.Banner ul li { float: left; }

.Banner ul {margin-left: -40px;}

.unslider-arrow {
  font-family: Expressway;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.7);
  padding: 0 20px 5px 20px;
}

.next {
  position: absolute;
  top: 91%;
  right: 48%;
}

.prev {
  position: absolute;
  top: 91%;
  right: 52%; /* change to left:0; if u wanna have arrow on left side */
}


Source: 

1. http://unslider.com/
2. http://summit7systems.com/a-simple-jquery-content-slider-for-sharepoint-200720102013-and-o365/