Jquery Tiny Carousel With Blog Posts -Tutorial Savvy

JQUERY TINY CAROUSEL plugin provides facilities for showing the items in horizontal/vertical sliding (carousel).
It can be downloaded from this link:-

The project structure,

This demo is “Retrieving the Blogger posts and displaying the post in the carousel demo.” Here we are retrieving 30 posts and displaying 3 posts per page.
The HTML markup and JQUERY script for the demo is tiny-carousel-demo.html ,

<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" href="./css/post-carousel-style.css" type="text/css" media="screen" />
        <title>Tiny Carousel Demo</title>
    </head>
    
    <body>
        <div id="blog-post-slider" class="blog-post-slider">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    <li class="blogger-post"></li>
                </ul>
            </div>
            <a class="buttons next" href="#">right</a>
            <ul class="pager"></ul>
        </div>
        <script src="./lib/jquery-1.9.0.min.js"></script>
        <script src="./lib/jquery.tinycarousel.min.js"></script>
        <script>
            $(document).ready(function () {

                var urlofmyBlog = "http://www.tutorialsavvy.com/feeds/posts/default?alt=json-in-script&max-results=30&callback=?",

                    ajaxToPost = $.ajax({
                        url: urlofmyBlog,
                        dataType: "jsonp",
                        type: 'get'
                    }),

                    successHandler = function (data) {

                        var entries = data.feed.entry,
                            author, title, publishDate,

                            published, link,

                            carouselContent = $(".blog-post-slider .overview"),

                            paginationElement = $(".pager"),

                            markup = new Array(),

                            pagerMarkup = new Array(),
                            postLength = parseInt(entries.length, 10);


                        /*Building Markup for Each Post*/
                        $.each(entries, function (key, aPost) {

                            author = aPost.author[0].name.$t;

                            title = (aPost.title.type == 'html') ? escape(aPost.title.$t) : aPost.title.$t;

                            published = new Date((aPost.published.type == 'html') ? escape(aPost.published.$t) : aPost.published.$t);

                            link = aPost.link[4].href;

                            publishDate = published.getDate() + "-" + published.getMonth() + "-" + published.getFullYear();

                            markup.push("<li class='post'>");

                            markup.push("<div class='post-title'>" + title + "</div>");

                            markup.push("<div class='post-author'>Author : " + author + "</div>");

                            markup.push("<div class='post-published'>Date : " + publishDate + "</div>");

                            markup.push("<div class='post-link'><a href = '" + link + "'>more</a></div>");

                            markup.push("</li>");

                        });

                        $(carouselContent).html(markup.join(""));

                        /*Creating pagination as we are showing 3 posts in a view show page no is 30/3 = 10*/

                        for (count = 0; count < postLength / 3; count++) {

                            pagerMarkup.push("<li><a rel='" + count + "' class='pagenum' href='#'>" + (count + 1) + "</a></li>");
                        }

                        $(paginationElement).html(pagerMarkup.join(""))


                        $('#blog-post-slider').tinycarousel({
                            pager: true,
                            interval: true,
                            display: 3
                        });

                    },
                    errorHandler = function () {

                        alert("Error in Ajax Call");
                    };

                ajaxToPost.done(successHandler),

                ajaxToPost.fail(errorHandler);

            });
        </script>
    </body>

</html>