Implement Image Slider With Zero Percent Effort.

Below is the entire code of my image slider.You just need to be copy the entire code and paste it into the php or html file.If you have internet connection on you computer then you don't need to be make any changes on it.All image and js are comes dynamically from server.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>phpsollutions.blogspot.com</title>
<style type="text/css" media="screen">

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }

    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),

            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);

        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect

        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);

        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;

            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                }

                currentPage = page;
            });

            return false;
        }

        $wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');

        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);
        });

        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });

        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });
};

$(document).ready(function () {
$('.infiniteCarousel').infiniteCarousel();
});
</script>

</head>

<body>
    <h1>Simple Image Slider On phpsollutions.blogspot.com</h1>

    <div class="infiniteCarousel">
      <div class="wrapper">
        <ul>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8vuHN3tINXyzDlldb9T28yCNz2DQj_3fUTj4M5XqbAaEG47CTsor6AkKzrGlJjUPsx82Meh_UY8PsEXwOQXO4CFInO4TffsaYJAlFVtiE7T-QeMXmaekO1oKcXPo4KXlnEoFMvDrB1ztH/s1600/image5.jpg" height="75" width="75" alt="Tall Glow" /></a></li>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdcrxhQ0cmzwVB2Khmyns72b35s79aiMKkGD5tpp_DA5f_J9iwKq51Qn9hJKoy2Kri3AWVLacFCTnoWeJ7yqpE9NntddgeB6kAxdjWt_rnOBX6vy_llMJlCkKwjlfm-bqNkB1QMQaSv5b/s1600/image3.jpg" height="75" width="75" alt="Wet Cab" /></a></li>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbmQUHbz-0C9du8q89SYrXfB2WOOauqNtIgh67F456c8gSICWDKBZLa20ksNef-IUqyuAINvEymmGq1J_dC7JvY1dyqRUAKiOMo6N7Pv6jJ2rznA19ZCpNOVx9fy8qmdoQh9wFYajZlNvs/s1600/image2.jpg" height="75" width="75" alt="Rockefella" /></a></li>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8vuHN3tINXyzDlldb9T28yCNz2DQj_3fUTj4M5XqbAaEG47CTsor6AkKzrGlJjUPsx82Meh_UY8PsEXwOQXO4CFInO4TffsaYJAlFVtiE7T-QeMXmaekO1oKcXPo4KXlnEoFMvDrB1ztH/s1600/image5.jpg" height="75" width="75" alt="Chrysler Reflect" /></a></li>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagpsmSgRE8EzRt59-xulLIByyRtQXG5zlRkL-qKk0PtMFHSU2_BktS1TNLefGyiEGiqDj2GBOGKqeXmFetPYMKqGs1k-IHS-Y0Pyjjv8sGJMzpuqxBpkfEZp6LETZjAgQOzCNrQsXaRLw/s1600/image4.jpg" height="75" width="75" alt="Chrysler Up" /></a></li>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdcrxhQ0cmzwVB2Khmyns72b35s79aiMKkGD5tpp_DA5f_J9iwKq51Qn9hJKoy2Kri3AWVLacFCTnoWeJ7yqpE9NntddgeB6kAxdjWt_rnOBX6vy_llMJlCkKwjlfm-bqNkB1QMQaSv5b/s1600/image3.jpg" height="75" width="75" alt="Time Square Awe" /></a></li>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbmQUHbz-0C9du8q89SYrXfB2WOOauqNtIgh67F456c8gSICWDKBZLa20ksNef-IUqyuAINvEymmGq1J_dC7JvY1dyqRUAKiOMo6N7Pv6jJ2rznA19ZCpNOVx9fy8qmdoQh9wFYajZlNvs/s1600/image2.jpg" height="75" width="75" alt="Wonky Buildings" /></a></li>
          <li><a href="www.phpsollutions.blogspot.com" title="Salman Ahmad">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19lLKOVy_eb8jcy6UP2v4vEiYLc3eK5m32hbYlaKPQyk5uqsB7D5zK3XhGNTkgBinAlvLRV2QHBvg0Hm80SRQuU9a8FRX6hdwSLigjR2WqRoTwj1_sbnK930vZJFymIq4O00uum-9yS5w/s1600/image1.jpg" height="75" width="75" alt="Leaves of Fall" /></a></li>
        </ul>
      </div>
    </div>
</body>
</html>

Happy Coding :)

Regards
Salman Ahmad

Implement Image Slider With Zero Percent Effort.

Post a Comment

Contact Form